<template>
  <div style="height: 100%; width: 100%">
    <guangbopanelCard
      ref="guangbopanelCard"
      @refreshData="refreshDataFn"
     :headerFlag="true"
          :leftIconFlag="true"
      :leftFlag="true"
      :asideLeftWidth="'200px'"
       :bottomFlag="true" :bottomIconFlag="true"
    >
      <template #asideLeft>
        <guangboeltree
          :treeData="state.treeData"
          :shouye="'shouye'"
          @handleNodeClick="handleNodeClick"
        ></guangboeltree>
      </template>
      <template #header>
        <div style="display: flex">
          <div style="width: 20%; display: flex; align-items: center">
            <span class="themfontColor searchColor">广播号码</span>
            <el-input
              v-model="state.searchData.userNumber"
              style="width: 50%; margin-left: 15px"
              placeholder="请输入"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              clearable
            />
          </div>
          <div style="width: 20%; display: flex; align-items: center">
            <span class="themfontColor searchColor">广播类型</span>
            <el-select
              v-model="state.searchData.type"
              style="width: 50%; margin-left: 15px"
              placeholder="请选择"
              clearable
            >
              <el-option label="普通终端" value="0"></el-option>
              <el-option label="对讲主机" value="1"></el-option>
              <el-option label="融合终端" value="2"></el-option>
              <el-option label="扩音终端" value="3"></el-option>
            </el-select>
          </div>
          <div>
            <el-button
              type="primary"
              @click="queryFn"
              >查询</el-button
            >
            <el-button @click="resetFn">重置</el-button>
            <!-- 此行代码勿删，页面重新挂载时，模拟点击自动播放监听音频 -->
            <span style="opacity: 0" id="jianting">监听</span>
          </div>
        </div>
      </template>
      <template #article>
        <div class="shouye">
          <div class="top">
            <el-checkbox
              @change="allFn"
              v-model="state.check.checkAll"
              size="large"
            >
              <template v-slot="label"
                ><span>全部（{{ state.allLength }}）</span></template
              >
            </el-checkbox>
            <el-checkbox
              @change="kongxianFn"
              v-model="state.check.checked1"
              size="large"
            >
              <template v-slot="label"
                ><span>空闲（{{ state.kongxianLength }}）</span></template
              >
            </el-checkbox>
            <el-checkbox
              @change="tonghuaFn"
              v-model="state.check.checked2"
              size="large"
            >
              <template v-slot="label"
                ><span>通话中（{{ state.tonghuaLength }}）</span></template
              >
            </el-checkbox>
            <el-checkbox
              @change="guangboFn"
              v-model="state.check.checked3"
              size="large"
            >
              <template v-slot="label"
                ><span>广播中（{{ state.guangboLength }}）</span></template
              >
            </el-checkbox>
            <el-checkbox
              @change="jiantingFn"
              v-model="state.check.checked4"
              size="large"
            >
              <template v-slot="label"
                ><span>监听中（{{ state.jiantingLength }}）</span></template
              >
            </el-checkbox>
            <el-checkbox
              @change="duanxianFn"
              v-model="state.check.checked5"
              size="large"
            >
              <template v-slot="label"
                ><span>断线（{{ state.duanxianLength }}）</span></template
              >
            </el-checkbox>
          </div>
          <div class="bottom">
            <div class="all">
              <div
                v-if="state.check.checkAll || state.check.checked1"
                class="gongyong one"
              >
                <div class="one-item">
                  <div class="title">空闲</div>
                  <div class="scrollbar">
                    <div
                      class="content"
                      v-for="(item, index) in state.kongxianData?.baseInfo"
                      :key="index"
                    >
                      <el-popover
                        ref="popoverRef"
                        placement="bottom-end"
                        trigger="click"
                        :width="200"
                        :close-on-click="false"
                      >
                        <template #reference>
                          <div class="t1" @click="showPopoverFn(index, item)">
                            <div class="t1-left">
                              <img
                                src="@/assets/guangboimg/telephone-blue.png"
                                alt=""
                              />
                            </div>
                            <div class="t1-right">
                              <div class="ft700">{{ item.userNumber }}</div>
                              <div class="gray" :title="item.userName">
                                {{ substrFn2(item.userName) }}
                              </div>
                            </div>
                          </div>
                        </template>
                        <div class="hover-popover-xiugai">
                          <!-- v-if="showPopover == index" -->
                          <div class="one">
                            <span style="font-weight: 700">{{
                              state.itemDialogData?.userNumber
                            }}</span>
                            <span @click.stop="closePopoverFn">x</span>
                            <!-- <el-icon  @click.stop="closePopoverFn"><Close /></el-icon> -->
                          </div>
                          <div class="two">
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">IP地址：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">{{
                                  state.itemDialogData?.ip
                                }}</span></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">安装位置：</span></el-col
                              >
                              <el-col :span="12"
                                ><span
                                  class="right"
                                  :title="state.itemDialogData?.Location"
                                  >{{
                                    substrFn2(state.itemDialogData?.Location)
                                  }}</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">状态：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0：空闲 (正常)1：广播中2：拨号中3：对讲中4：喊话中5：监听中6：断线 -->
                                  空闲</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">类型：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0主话站，1副话站A，2副话站B，3客户端，4移动端，未知 -->
                                  {{
                                    state.itemDialogData?.type == 0
                                      ? "普通终端"
                                      : state.itemDialogData?.type == 1
                                      ? "对讲主机"
                                      : state.itemDialogData?.type == 2
                                      ? "融合终端"
                                      : state.itemDialogData?.type == 3
                                      ? "扩音终端"
                                      : "未知"
                                  }}
                                </span></el-col
                              >
                            </el-row>
                          </div>
                          <div class="three">
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="呼叫"
                              placement="top"
                            >
                              <div class="ftct" @click="hujiaoFn(item)">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="hujiao"
                                />
                              </div>
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="详情"
                              placement="top"
                            >
                              <div class="ftct" @click="xiangqingFn2(item)">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="xiangqing"
                                />
                                <!-- <div class="ft12">详情</div> -->
                              </div>
                            </el-tooltip>
                          </div>
                          <!-- <div class="yinliang">
                            <svg-icon
                              class-name="icon"
                              icon-class="yinliang-dark"
                            />
                            <el-slider
                              @change="sliderChangeFn1"
                              class="sliders"
                              v-model="item.Volume"
                              size="small"
                              :min="1"
                              :max="5"
                            />
                          </div> -->
                        </div>
                      </el-popover>
                      <div class="b1">
                        <el-button
                          @click="hujiaoFn(item)"
                          link
                          class="b1-left"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="hujiao"
                          />
                          呼叫</el-button
                        >
                        <el-button
                          @click="jiankongFn(item)"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="jiankong"
                          />监控</el-button
                        >
                      </div>
                    </div>
                    <i
                      v-for="num in 2"
                      :key="num"
                      :style="{ width: state.gridWidth, height: '118px' }"
                    ></i>
                  </div>
                </div>
              </div>
              <div
                v-if="state.check.checkAll || state.check.checked2"
                class="gongyong two"
              >
                <div class="one-item">
                  <div class="title">通话中</div>
                  <audio
                    style="display: none"
                    ref="audio"
                    controls="controls"
                    autoplay
                  >
                    <source :src="audioUrl" type="audio/wav" />
                  </audio>
                  <div class="scrollbar">
                    <div
                      class="content"
                      v-for="(item, index) in state.tonghuaData"
                      :key="index"
                    >
                      <el-popover
                        ref="popoverRef2"
                        placement="bottom-end"
                        trigger="click"
                        :width="200"
                      >
                        <template #reference>
                          <div class="t1">
                            <el-scrollbar class="t1-left-scroll">
                              <span
                                @click="showPopoverFn2(index, item2)"
                                class="t1-left"
                                v-for="(item2, index2) in item.baseInfo"
                                :key="index2"
                              >
                                <div class="ft700">
                                  {{ item2.userNumber || `&nbsp;` }}
                                </div>
                                <div class="gray" :title="item2.groupName">
                                  {{ substrFn(item2.groupName) || `&nbsp;` }}
                                </div>
                                <!-- <i
                                  v-for="num in 2"
                                  :key="num"
                                  style="width: 41%"
                                ></i> -->
                              </span>
                              <i
                                v-for="num in 2"
                                :key="num"
                                style="width: 41%"
                              ></i>
                            </el-scrollbar>
                          </div>
                        </template>
                        <div class="hover-popover-xiugai">
                          <!-- v-if="showPopover2 == index" -->
                          <div class="one">
                            <span style="font-weight: 700">{{
                              state.itemDialogData?.userNumber
                            }}</span>
                            <span @click.stop="closePopoverFn2">x</span>
                            <!-- <el-icon  @click.stop="closePopoverFn2"><Close /></el-icon> -->
                          </div>
                          <div class="two">
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">IP地址：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">{{
                                  state.itemDialogData?.ip
                                }}</span></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">安装位置：</span></el-col
                              >
                              <el-col :span="12"
                                ><span
                                  class="right"
                                  :title="state.itemDialogData?.groupName"
                                  >{{
                                    substrFn(state.itemDialogData?.groupName)
                                  }}</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">状态：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0：空闲 (正常)1：广播中2：拨号中3：对讲中4：喊话中5：监听中6：断线 -->
                                  {{
                                    state.itemDialogData?.regStatus == 0
                                      ? "空闲"
                                      : state.itemDialogData?.regStatus == 1
                                      ? "通话中"
                                      : state.itemDialogData?.regStatus == 2
                                      ? "拨号中"
                                      : state.itemDialogData?.regStatus == 3
                                      ? "广播中"
                                      : state.itemDialogData?.regStatus == 4
                                      ? "喊话中"
                                      : state.itemDialogData?.regStatus == 5
                                      ? "监听中"
                                      : state.itemDialogData?.regStatus == 6
                                      ? "断线"
                                      : ""
                                  }}</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">类型：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0主话站，1副话站A，2副话站B，3客户端，4移动端，未知 -->
                                  {{
                                    state.itemDialogData?.TerminalType == 0
                                      ? "主话站"
                                      : state.itemDialogData?.TerminalType == 1
                                      ? "副话站A"
                                      : state.itemDialogData?.TerminalType == 2
                                      ? "副话站B"
                                      : state.itemDialogData?.TerminalType == 3
                                      ? "客户端"
                                      : state.itemDialogData?.TerminalType == 4
                                      ? "移动端"
                                      : "未知"
                                  }}
                                </span></el-col
                              >
                            </el-row>
                          </div>
                          <div class="three">
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="强插"
                              placement="top"
                            >
                              <div class="ftct" @click="jtcharuFn(item)">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="charu"
                                />
                              </div>
                            </el-tooltip>
                            <div class="ftct" @click="jtFn(item)" :title="'监听'">
                            <svg-icon class="ft24" class-name="icon" icon-class="jianting" />
                          </div>
                            <!-- <el-tooltip
                              class="item"
                              effect="light"
                              content="挂断"
                              placement="top"
                            >
                              <div
                                class="ftct"
                                @click="guaduanFn(item,'danguaduan')"
                              >
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="guaduan"
                                />
                              </div>
                            </el-tooltip> -->
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="强拆"
                              placement="top"
                            >
                              <div class="ftct" @click="jtqiangchaiFn(item,'dan')">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="qiangchai"
                                />
                              </div>
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="详情"
                              placement="top"
                            >
                              <div class="ftct" @click="xiangqingFn">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="xiangqing"
                                />
                              </div>
                            </el-tooltip>
                          </div>
                          <!-- <div class="yinliang">
                            <svg-icon
                              class-name="icon"
                              icon-class="yinliang-dark"
                            />
                            <el-slider
                              @change="sliderChangeFn2"
                              class="sliders"
                              v-model="item.Volume"
                              size="small"
                              :min="1"
                              :max="5"
                            />
                          </div> -->
                        </div>
                      </el-popover>
                      <div class="b1">
                        <el-button
                          @click="jtcharuFn(item)"
                          link
                          class="b1-left"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="qiangcha"
                          />
                          强插</el-button
                        >
                        <el-button
                          @click="jtFn(item)"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="jianting"
                          />监听</el-button
                        >
                        <el-button
                          @click="jtqiangchaiFn(item,'quanbu')"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="qiangchai"
                          />强拆</el-button
                        >
                      </div>
                    </div>
                    <i
                      v-for="num in 2"
                      :key="num"
                      :style="{ width: state.gridWidth, height: '118px' }"
                    ></i>
                  </div>
                </div>
              </div>
              <div
                v-if="state.check.checkAll || state.check.checked3"
                class="gongyong three"
              >
                <div class="one-item">
                  <div class="title">广播中</div>
                  <div class="scrollbar">
                    <div
                      class="content"
                      v-for="(item, index) in state.guangboData"
                      :key="index"
                    >
                      <el-popover
                        ref="popoverRef3"
                        placement="bottom-end"
                        trigger="click"
                        :width="200"
                      >
                        <template #reference>
                          <div class="t1">
                            <!-- <el-scrollbar style="width: 100%;height: 110px;"> -->
                            <el-scrollbar class="t1-left-scroll">
                              <span
                                class="t1-left"
                                @click="showPopoverFn3(index, item2, item)"
                                v-for="(item2, index2) in item.baseInfo"
                                :key="index2"
                              >
                                <div class="ft700">
                                  {{ item2.userNumber || `&nbsp;` }}
                                </div>
                                <div class="gray" :title="item2.userName">
                                  {{ substrFn(item2.userName) || `&nbsp;` }}
                                </div>
                              </span>
                              <!-- <i
                                v-for="num in 2"
                                :key="num"
                                style="width: 110px"
                              ></i> -->
                            </el-scrollbar>
                          </div>
                        </template>
                        <div class="hover-popover-xiugai">
                          <!-- v-if="showPopover3 == index"  -->
                          <div class="one">
                            <span style="font-weight: 700">{{
                              state.itemDialogData?.userNumber
                            }}</span>
                            <span @click.stop="closePopoverFn3">x</span>
                            <!-- <el-icon  @click.stop="closePopoverFn2"><Close /></el-icon> -->
                          </div>
                          <div class="two">
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">IP地址：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">{{
                                  state.itemDialogData?.ip
                                }}</span></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">安装位置：</span></el-col
                              >
                              <el-col :span="12"
                                ><span
                                  class="right"
                                  :title="state.itemDialogData?.Location"
                                  >{{
                                    substrFn(state.itemDialogData?.Location)
                                  }}</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">状态：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0：空闲 (正常)1：广播中2：拨号中3：对讲中4：喊话中5：监听中6：断线 -->
                                广播中
                                  <!-- {{
                                    state.itemDialogData?.Status == 0
                                      ? "空闲"
                                      : state.itemDialogData?.Status == 1
                                      ? "广播中"
                                      : state.itemDialogData?.Status == 2
                                      ? "拨号中"
                                      : state.itemDialogData?.Status == 3
                                      ? "通话中"
                                      : state.itemDialogData?.Status == 4
                                      ? "喊话中"
                                      : state.itemDialogData?.Status == 5
                                      ? "监听中"
                                      : state.itemDialogData?.Status == 6
                                      ? "断线"
                                      : ""
                                  }} -->
                                  </span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">类型：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0主话站，1副话站A，2副话站B，3客户端，4移动端，未知 -->
                                  {{
                                    state.itemDialogData?.type == 0
                                      ? "普通终端"
                                      : state.itemDialogData?.type == 1
                                      ? "对讲主机"
                                      : state.itemDialogData?.type == 2
                                      ? "融合终端"
                                      : state.itemDialogData?.type == 3
                                      ? "扩音终端"
                                      : "未知"
                                  }}
                                </span></el-col
                              >
                            </el-row>
                          </div>
                          <div class="three">
                            <!-- <div class="ftct" @click="zantingFn(item)">
                              <el-tooltip
                                v-if="item?.playStatus == 1"
                                class="item"
                                effect="light"
                                content="暂停"
                                placement="top"
                              >
                                <div>
                                  <svg-icon
                                    class="svgIcon ft24"
                                    class-name="icon"
                                    icon-class="bofang"
                                  />
                                </div>
                              </el-tooltip>
                              <el-tooltip
                                v-if="item?.playStatus == 2"
                                class="item"
                                effect="light"
                                content="继续"
                                placement="top"
                              >
                                <img
                                  style="
                                    width: 24px;
                                    height: 24px;
                                    display: inline-block;
                                  "
                                  src="@/assets/guangboimg/音乐暂停.png"
                                  alt=""
                                />
                              </el-tooltip>
                            </div> -->
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="结束"
                              placement="top"
                            >
                              <div
                                class="ftct"
                                @click="jieshuFn(item, 'danjieshu')"
                              >
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="dyguanbi"
                                />
                              </div>
                            </el-tooltip>

                            <!-- <div class="ftct" @click="yinyueFn(item,'guangbozhong')">
                            <svg-icon class-name="icon" icon-class="yinyue" />
                            <div class="ft12">音乐</div>
                          </div> -->
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="详情"
                              placement="top"
                            >
                              <div class="ftct" @click="xiangqingFn">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="xiangqing"
                                />
                              </div>
                            </el-tooltip>
                          </div>
                          <!-- <div class="yinliang">
                            <svg-icon
                              class-name="icon"
                              icon-class="yinliang-dark"
                            />
                            <el-slider
                              @change="sliderChangeFn3"
                              class="sliders"
                              v-model="item.Volume"
                              size="small"
                              :min="1"
                              :max="5"
                            />
                          </div> -->
                        </div>
                      </el-popover>
                      <div v-if="item?.fileList" class="b1">
                        <div style="display: flex; align-items: center">
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="yuefu"
                          />
                          <el-dropdown
                            @command="xiala"
                            ref="dropdown1"
                            style="width: 140px"
                          >
                            <div style="display: flex; align-items: center">
                              <span class="b1-left">{{
                                item.fileList[0].fileName
                              }}</span>

                              <svg-icon
                                class="svgIcon"
                                class-name="icon"
                                icon-class="xiala"
                                style="
                                  width: 15px;
                                  height: 15px;
                                  margin-left: 5px;
                                "
                              />
                            </div>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  v-for="(item3, index3) in item.fileList"
                                  :key="index3"
                                  :command="item3"
                                >
                                  <span @click="xialaFn(item)">{{
                                    item3.fileName
                                  }}</span>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </div>
                        <div class="fcc">
                          <el-tooltip
                            class="item"
                            effect="light"
                            content="结束"
                            placement="top"
                          >
                            <el-button
                              @click="jieshuFn(item)"
                              link
                              class="b1-right"
                            >
                              <svg-icon
                                class="svgIcon"
                                class-name="icon"
                                icon-class="dyguanbi"
                            /></el-button>
                          </el-tooltip>

                          <el-button
                            @click="zantingFn(item)"
                            link
                            class="b1-right"
                          >
                           <!-- playStatus：0 待播放 1 播放中 2 暂停 3 完成 -->
                            <el-tooltip
                              v-if="item.playStatus == 1"
                              class="item"
                              effect="light"
                              content="暂停"
                              placement="top"
                            >
                              <div>
                                <svg-icon
                                  class="svgIcon"
                                  class-name="icon"
                                  icon-class="bofang"
                                />
                              </div>
                            </el-tooltip>
                           <!-- playStatus：0 待播放 1 播放中 2 暂停 3 完成 -->
                            <el-tooltip
                              v-if="item.playStatus == 2"
                              class="item"
                              effect="light"
                              content="继续"
                              placement="top"
                            >
                              <img
                                style="
                                  width: 20px;
                                  height: 20px;
                                  display: inline-block;
                                "
                                src="@/assets/guangboimg/音乐暂停.png"
                                alt=""
                              />
                            </el-tooltip>
                          </el-button>
                        </div>
                      </div>
                      <div v-else class="b1">
                        <div style="display: flex; align-items: center">
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="tishi"
                          />
                          <span
                            class="ftsz b1-right"
                            style="letter-spacing: 10px"
                            >紧急喊话中</span
                          >
                        </div>
                      </div>
                    </div>
                    <i
                      v-for="num in 2"
                      :key="num"
                      :style="{ width: state.gridWidth, height: '118px' }"
                    ></i>
                  </div>
                </div>
              </div>
              <div
                v-if="state.check.checkAll || state.check.checked4"
                class="gongyong four"
              >
                <audio
                  style="display: none"
                  id="audio"
                  controls
                  autoplay
                ></audio>
                <div class="one-item">
                  <div class="title">监听中</div>
                  <div class="scrollbar">
                    <div
                      class="content"
                      v-for="(item, index) in state.jiantingData"
                      :key="index"
                    >
                      <div class="t1">
                        <el-scrollbar class="t1-left-scroll">
                          <el-popover
                            ref="popoverRef4"
                            placement="bottom-end"
                            trigger="click"
                            :width="200"
                          >
                            <template #reference>
                              <div>
                                <span
                                  ref="popoverRef4"
                                  @click.native="
                                    showPopoverFn4(item, index, item2)
                                  "
                                  class="t1-left"
                                  v-for="(
                                    item2, index2
                                  ) in item?.baseInfo"
                                  :key="index2"
                                >
                                  <div class="ft700">
                                    {{ item2?.userNumber || `&nbsp;` }}
                                  </div>
                                  <div class="gray" :title="item2?.userName">
                                    {{ substrFn(item2?.userName) || `&nbsp;` }}
                                  </div>
                                </span>
                                <i
                                  v-for="num in 2"
                                  :key="num"
                                  style="width: 110px"
                                ></i>
                              </div>
                              <!-- </el-scrollbar>
                          </div> -->
                            </template>
                            <div class="hover-popover-xiugai">
                              <!-- v-if="showPopover4 == index" -->
                              <div class="one">
                                <span style="font-weight: 700">{{
                                  state.itemDialogData?.userNumber
                                }}</span>
                                <span @click.stop="closePopoverFn4">x</span>
                                <!-- <el-icon  @click.stop="closePopoverFn2"><Close /></el-icon> -->
                              </div>
                              <div class="two">
                                <el-row>
                                  <el-col :span="12"
                                    ><span class="left">IP地址：</span></el-col
                                  >
                                  <el-col :span="12"
                                    ><span class="right">{{
                                      state.itemDialogData?.ip
                                    }}</span></el-col
                                  >
                                </el-row>
                                <el-row>
                                  <el-col :span="12"
                                    ><span class="left"
                                      >安装位置：</span
                                    ></el-col
                                  >
                                  <el-col :span="12"
                                    ><span
                                      class="right"
                                      :title="state.itemDialogData?.userName"
                                      >{{
                                        substrFn(state.itemDialogData?.userName)
                                      }}</span
                                    ></el-col
                                  >
                                </el-row>
                                <el-row>
                                  <el-col :span="12"
                                    ><span class="left">状态：</span></el-col
                                  >
                                  <el-col :span="12"
                                    ><span class="right">
                                      <!-- 0：空闲 (正常)1：广播中2：拨号中3：对讲中4：喊话中5：监听中6：断线 -->
                                     监听中</span
                                    ></el-col
                                  >
                                </el-row>
                                <el-row>
                                  <el-col :span="12"
                                    ><span class="left">类型：</span></el-col
                                  >
                                  <el-col :span="12"
                                    ><span class="right">
                                      <!-- 0主话站，1副话站A，2副话站B，3客户端，4移动端，未知 -->
                                      {{
                                       state.itemDialogData?.type == 0
                                      ? "普通终端"
                                      : state.itemDialogData?.type == 1
                                      ? "对讲主机"
                                      : state.itemDialogData?.type == 2
                                      ? "融合终端"
                                      : state.itemDialogData?.type == 3
                                      ? "扩音终端"
                                      : "未知"
                                      }}
                                    </span></el-col
                                  >
                                </el-row>
                              </div>
                              <div class="three">
                                <el-tooltip
                                  class="item"
                                  effect="light"
                                  content="挂断"
                                  placement="top"
                                >
                                  <div
                                    class="ftct"
                                    @click="jiantingGuaduanFn(item, 'jtgd')"
                                  >
                                    <svg-icon
                                      class="ft24"
                                      class-name="icon"
                                      icon-class="guaduan"
                                    />
                                    <!-- <div class="ft12">挂断</div> -->
                                  </div>
                                </el-tooltip>

                                <!-- <div class="ftct" @click="jtFn(item)">
                            <svg-icon class-name="icon" icon-class="jianting" />
                            <div class="ft12">监听</div>
                          </div> -->
                                <el-tooltip
                                  class="item"
                                  effect="light"
                                  content="详情"
                                  placement="top"
                                >
                                  <div class="ftct" @click="xiangqingFn">
                                    <svg-icon
                                      class="ft24"
                                      class-name="icon"
                                      icon-class="xiangqing"
                                    />
                                    <!-- <div class="ft12">详情</div> -->
                                  </div>
                                </el-tooltip>
                              </div>
                              <!-- <div class="yinliang">
                                <svg-icon
                                  class-name="icon"
                                  icon-class="yinliang-dark"
                                />
                                <el-slider
                                  @change="sliderChangeFn4"
                                  class="sliders"
                                  v-model="item.Volume"
                                  size="small"
                                  :min="1"
                                  :max="5"
                                />
                              </div> -->
                            </div>
                          </el-popover>
                        </el-scrollbar>
                      </div>

                      <div class="b1">
                        <el-button
                          @click="jiantingGuaduanFn(item, 'jtgd')"
                          link
                          class="b1-left"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="guaduan"
                          />
                          挂断</el-button
                        >
                        <!-- <el-button
                          @click="jtFn(item)"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="jianting"
                          />监听</el-button
                        > -->
                        <!-- <el-button
                          @click="xiangqingFn"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="xiangqing"
                          />详情</el-button
                        > -->
                      </div>
                    </div>
                    <i
                      v-for="num in 2"
                      :key="num"
                      :style="{ width: state.gridWidth, height: '118px' }"
                    ></i>
                  </div>
                </div>
              </div>
              <div
                v-if="state.check.checkAll || state.check.checked5"
                class="gongyong five"
              >
                <div class="one-item">
                  <div class="title">断线</div>
                  <div class="scrollbar">
                    <div
                      class="content"
                      v-for="(item, index) in state.duanxianData?.baseInfo"
                      :key="index"
                    >
                      <el-popover
                        ref="popoverRef5"
                        placement="bottom-end"
                        trigger="click"
                        :width="200"
                      >
                        <template #reference>
                          <div class="t1" @click="showPopoverFn5(index, item)">
                            <div class="t1-left">
                              <img
                                src="@/assets/guangboimg/telephone-gray.png"
                                alt=""
                              />
                            </div>
                            <div class="t1-right">
                              <div class="ft700">{{ item.userNumber }}</div>
                              <div class="gray" :title="item.userName">
                                {{ substrFn2(item.userName) }}
                              </div>
                            </div>
                          </div>
                        </template>

                        <div class="hover-popover-xiugai">
                          <!-- v-if="showPopover5 == index" -->
                          <div class="one">
                            <span style="font-weight: 700">{{
                              state.itemDialogData?.userNumber
                            }}</span>
                            <span @click.stop="closePopoverFn5">x</span>
                            <!-- <el-icon  @click.stop="closePopoverFn2"><Close /></el-icon> -->
                          </div>
                          <div class="two">
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">IP地址：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">{{
                                  state.itemDialogData?.ip
                                }}</span></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">安装位置：</span></el-col
                              >
                              <el-col :span="12"
                                ><span
                                  class="right"
                                  :title="state.itemDialogData?.Location"
                                  >{{
                                    substrFn2(state.itemDialogData?.Location)
                                  }}</span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">状态：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0：空闲 (正常)1：广播中2：拨号中3：对讲中4：喊话中5：监听中6：断线 -->
                                  <!-- {{
                                    state.itemDialogData?.Status == 0
                                      ? "空闲"
                                      : state.itemDialogData?.Status == 1
                                      ? "广播中"
                                      : state.itemDialogData?.Status == 2
                                      ? "拨号中"
                                      : state.itemDialogData?.Status == 3
                                      ? "通话中"
                                      : state.itemDialogData?.Status == 4
                                      ? "喊话中"
                                      : state.itemDialogData?.Status == 5
                                      ? "监听中"
                                      : state.itemDialogData?.Status == 6
                                      ? "断线"
                                      : ""
                                  }} -->
                                      断线
                                  </span
                                ></el-col
                              >
                            </el-row>
                            <el-row>
                              <el-col :span="12"
                                ><span class="left">类型：</span></el-col
                              >
                              <el-col :span="12"
                                ><span class="right">
                                  <!-- 0主话站，1副话站A，2副话站B，3客户端，4移动端，未知 -->
                                  {{
                                    state.itemDialogData?.type == 0
                                      ? "普通终端"
                                      : state.itemDialogData?.type == 1
                                      ? "对讲主机"
                                      : state.itemDialogData?.type == 2
                                      ? "融合终端"
                                      : state.itemDialogData?.type == 3
                                      ? "扩音终端"
                                      : "未知"
                                  }}
                                </span></el-col
                              >
                            </el-row>
                          </div>
                          <div class="three">
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="记录"
                              placement="top"
                            >
                              <div class="ftct" @click="jiluFn(item)">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="jilu"
                                />
                                <!-- <div class="ft12">记录</div> -->
                              </div>
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="light"
                              content="详情"
                              placement="top"
                            >
                              <div class="ftct" @click="xiangqingFn2(item)">
                                <svg-icon
                                  class="ft24"
                                  class-name="icon"
                                  icon-class="xiangqing"
                                />
                                <!-- <div class="ft12">详情</div> -->
                              </div>
                            </el-tooltip>
                          </div>
                          <!-- <div
                            class="yinliang"
                            v-if="state.itemDialogData?.Status != 6"
                          >
                            <svg-icon
                              class-name="icon"
                              icon-class="yinliang-dark"
                            />
                            <el-slider
                              @change="sliderChangeFn5"
                              class="sliders"
                              v-model="item.Volume"
                              size="small"
                              :min="1"
                              :max="5"
                            />
                          </div> -->
                        </div>
                      </el-popover>
                      <div class="b1">
                        <el-button
                          @click="jiluFn(item)"
                          link
                          class="b1-left"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="jilu"
                          />
                          记录</el-button
                        >
                        <el-button
                          @click="xiangqingFn2(item)"
                          link
                          class="b1-right"
                        >
                          <svg-icon
                            class="svgIcon"
                            class-name="icon"
                            icon-class="xiangqing"
                          />详情</el-button
                        >
                      </div>
                    </div>
                    <i
                      v-for="num in 2"
                      :key="num"
                      :style="{ width: state.gridWidth, height: '118px' }"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </guangbopanelCard>
      <!-- 呼叫 未使用，改用底部呼叫弹窗-->
  <el-dialog
    v-model="state.hujiaoFlag"
    width="15%"
    :before-close="hujiaohandleClose"
  >
    <template #header>
      <span style="font-weight: 700">呼叫</span>
    </template>
    <div>
      <el-form>
        <el-form-item label="主叫号码">
          <el-input
            v-model="state.kongxianhujiaoform.phone"
            placeholder="请输入主叫号码"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="hujiaoVideo">
      <div class="right">
        <div class="xiangqingVideo">
          <img
            v-if="state.detailShipinData.IsPreview !== false"
            @click="WindowDetailFn"
            style="width: 100%; height: 100%; border-radius: 8px"
            :src="`${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`"
            alt=""
          />
          <div v-else class="wushipin">
            <img
              style="width: 100px; height: 100px"
              src="@/assets/guangboimg/监控摄像头.png"
              alt=""
            />
            <span style="letter-spacing: 5px">设备未连接</span>
          </div>
        </div>
      </div>
    </div>
    <div class="hujiaoCenter">
      <div class="c1"></div>
      <div class="c2">正在呼叫中...</div>
      <div class="c3"></div>
    </div>
    <div class="hujiaoBottom">
      <img @click="guaduanFn" src="@/assets/guangboimg/挂断.png" alt="" />
      <img
        v-if="false"
        @click="state.hujiaoxuanzeFlag = true"
        src="@/assets/guangboimg/加号.png"
        alt=""
      />
      <div class="plus" v-if="state.hujiaoxuanzeFlag">
        <span class="top">
          <span>选择设备</span>
          <span @click="state.hujiaoxuanzeFlag = false">x</span>
        </span>
        <el-scrollbar style="width: 100%; height: 150px">
          <div>
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
            <el-checkbox
              v-model="state.form.checked1"
              label="7991"
              size="large"
              style="margin: 0; margin-left: 10px"
            />
          </div>
        </el-scrollbar>
        <div style="float: right; margin: 10px 0 0 0">
          <el-button size="small" type="primary" @click="savehujiaoxuanzeFn">
            确定
          </el-button>
        </div>
      </div>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="hujiaohandleClose">取消</el-button>
        <el-button type="primary" @click="savehujiaoFn">
          确定
        </el-button>
      </div>
    </template> -->
  </el-dialog>
  <!-- 监控 -->
  <el-dialog
    v-model="state.jiankongFlag"
    width="30%"
    :before-close="jiankonghandleClose"
  >
    <template #header>
      <span style="font-weight: 700">查看监控</span>
    </template>
    <div class="jiankongVideo">
      <div class="right">
        <div class="xiangqingVideo">
          <div
            style="width: 100%; height: 100%"
            v-if="
              state.detailShipinData.IsPreview !== false &&
              state.detailShipinData.dizengIP
            "
          >
            <!-- <img
            @click="WindowDetailFn"
            style="width: 100%; height: 100%; border-radius: 8px"
            :src="`${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`"
            alt=""
          /> -->
            <iframe
              :id="`iframe-jiankong`"
              src="/iframe.html"
              frameborder="0"
              scrolling="no"
              style="width: 100%; height: 100%"
            >
            </iframe>
            {{ sendImageUrlToIframejiankong() }}
          </div>
          <div v-else class="wushipin">
            <img
              style="width: 100px; height: 100px"
              src="@/assets/guangboimg/监控摄像头.png"
              alt=""
            />
            <span style="letter-spacing: 5px">设备未连接</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-button link style="position: absolute; right: 20px; bottom: 0"
      >查看回放</el-button> -->

    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="hujiaohandleClose">取消</el-button>
        <el-button type="primary" @click="savehujiaoFn">
          确定
        </el-button>
      </div>
    </template> -->
  </el-dialog>
  <!-- 呼叫记录 -->
  <el-dialog
    v-model="state.jiluFlag"
    width="50%"
    :before-close="jiluhandleClose"
  >
    <template #header>
      <span style="font-weight: 700">呼叫记录</span>
    </template>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="主叫号码">
            <el-input
              v-model="state.jiluDetail.zhujiaoTerminalNO"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="被叫号码">
            <el-input
              v-model="state.jiluDetail.TerminalNO"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否接通">
            <el-select
              v-model="state.jiluDetail.callType"
              placeholder="请选择"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="未接" :value="0"></el-option>
              <el-option label="已接" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="时间选择">
            <el-date-picker
              style="width: 80%"
              v-model="state.jiluDetail.time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
               :default-time="[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 1, 1, 23, 59, 59),
              ]"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button @click="jilusearchFn('search')" type="primary"
            >查询</el-button
          >
          <el-button @click="jiluresetFn">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="top">
      <div
        @click="jinriFn"
        :class="state.topIndex == 1 ? 'activeColor' : 'widthColor'"
      >
        今日
      </div>
      <div
        @click="zuoriFn"
        :class="state.topIndex == 2 ? 'activeColor' : 'widthColor'"
      >
        昨日
      </div>
      <div
        @click="benzhouFn"
        :class="state.topIndex == 3 ? 'activeColor' : 'widthColor'"
      >
        本周
      </div>
    </div>
    <el-table :data="state.tableData" height="280px">
      <el-table-column
            v-for="(item, index) in state.tableheads_show"
            :label="item.title"
            :prop="item.field"
            :key="index"
            :width="item.width ? item.width : ''"
            show-overflow-tooltip
          >
          <template #default="scope">
            <span v-if="item.field=='status'">
              {{scope.row.status == 0 ? "未接" : "已接"}}
            </span>
                <span v-else-if="item.field=='file'">
              {{scope.row[item.field]?.fileName}}
            </span>
            <span v-else>
              {{scope.row[item.field]}}
            </span>
          </template>
          </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button
            v-if="scope.row.file"
            @click="chakanluyinFn(scope)"
            link
            style="color: #409EFF"
            >查看录音</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <vxe-pager
      class="vxePager"
      @page-change="pagechange"
      border
      background
      align="right"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      v-model:current-page="state.pageTotal.currentPage"
      v-model:page-size="state.pageTotal.pageSize"
      :total="state.pageTotal.total"
    >
    </vxe-pager>
  </el-dialog>
  <!-- 查看录音 -->
  <el-dialog
    v-model="state.chakanluyinFlag"
    width="28%"
    :before-close="chakanluyinhandleClose"
  >
    <template #header>
      <span style="font-weight: 700">查看录音</span>
    </template>
    <div style="width: 100%">
      <el-row>
        <el-col :span="12">
          <span>呼叫终端：</span
          ><span>{{ state.chakanData.callerNumber }}</span></el-col
        >
        <el-col :span="12">
          <span>被呼叫终端：</span
          ><span>{{ state.chakanData.calleeNumber }}</span></el-col
        >
      </el-row>
      <el-row style="margin: 10px 0">
        <el-col :span="12">
          <span>通话时间：</span
          ><span>{{ state.chakanData.duration }}</span></el-col
        >
        <el-col :span="12">
          <span>录音名称：</span
          ><span>{{
            state.chakanData.FileName ? state.chakanData.FileName : "无"
          }}</span></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center"
          ><audio ref="audioPlayer" controls autoplay></audio>
        </el-col>
      </el-row>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="hujiaohandleClose">取消</el-button>
        <el-button type="primary" @click="savehujiaoFn">
          确定
        </el-button>
      </div>
    </template> -->
  </el-dialog>
  <!-- 监听 -->
  <el-dialog
    v-model="state.jiantingFlag"
    width="30%"
    :before-close="jiantinghandleClose"
  >
    <template #header>
      <span style="font-weight: 700">监听</span>
    </template>
    <div class="jiantingVideo">
      <!-- <div class="video-item" v-for="(item, index) in 4" :key="index"></div> -->
      <div class="right">
        <div class="xiangqingVideo">
          <div
            style="width: 100%; height: 100%"
            v-if="
              state.detailShipinData.IsPreview !== false &&
              state.detailShipinData.dizengIP
            "
          >
            <!-- <img
            @click="WindowDetailFn"
            style="width: 100%; height: 100%; border-radius: 8px"
            :src="`${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`"
            alt=""
          /> -->
            <iframe
              :id="`iframe-jianting`"
              src="/iframe.html"
              frameborder="0"
              scrolling="no"
              style="width: 100%; height: 100%"
            >
            </iframe>
            {{ sendImageUrlToIframejianting() }}
          </div>
          <div v-else class="wushipin">
            <img
              style="width: 100px; height: 100px"
              src="@/assets/guangboimg/监控摄像头.png"
              alt=""
            />
            <span style="letter-spacing: 5px">设备未连接</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer jiantingBottom">
        <el-button
          @click="jiantingGuaduanFn"
          link
          class="b1-left"
          style="color: #000"
        >
          <svg-icon
            style="width: 50px; height: 50px"
            class="svgIcon"
            class-name="icon"
            icon-class="guaduan"
          />
        </el-button>
        <!-- <span class="t1" @click="jtDialogcharuFn">
          <img src="@/assets/guangboimg/加号.png" alt="" />
          <span>强插</span>
        </span> -->
        <!-- <span @click="jtDialogqiangchaiFn" class="t2">
          <img src="@/assets/guangboimg/强拆.png" alt="" />
          <span>强拆</span>
        </span> -->
        <!-- <el-button @click="hujiaohandleClose">取消</el-button>
        <el-button type="primary" @click="savehujiaoFn">
          确定
        </el-button> -->
      </div>
    </template>
  </el-dialog>
  <!-- 监听强插 (通话)-->
  <el-dialog
    v-model="state.qiangchaFlag"
    width="30%"
    :before-close="qiangchahandleClose"
  >
    <template #header>
      <span style="font-weight: 700">强插</span>
    </template>
    <div class="qiangchaVideo">
      <!-- <el-input v-model="qiangchaVal" placeholder="请输入本设备号码" /> -->
      <el-form
        ref="qiangchaRef"
        :model="state.qiangchaForm"
        :rules="state.qiangchaRules"
        label-width="auto"
      >
        <el-form-item prop="TerminalNO" label="本设备号码">
          <el-input
            v-model="state.qiangchaForm.TerminalNO"
            placeholder="请输入本设备号码"
          />
        </el-form-item>
      </el-form>
      <!-- <div class="video-item" v-for="(item, index) in 2" :key="index"></div> -->
      <!-- <div class="video-item">
        <div class="right">
          <div class="xiangqingVideo">
            <div
              style="width: 100%; height: 100%"
              v-if="
                state.detailShipinData.IsPreview !== false &&
                state.detailShipinData.dizengIP
              "
            >
              <img
              @click="WindowDetailFn"
              style="width: 100%; height: 100%; border-radius: 8px"
              :src="`${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`"
              alt=""
            />
              <iframe
                :id="`iframe-qiangcha`"
                src="/iframe.html"
                frameborder="0"
                scrolling="no"
                style="width: 100%; height: 100%"
              >
              </iframe>
              {{ sendImageUrlToIframejiantingqiangcha() }}
            </div>
            <div v-else class="wushipin">
              <img
                style="width: 100px; height: 100px"
                src="@/assets/guangboimg/监控摄像头.png"
                alt=""
              />
              <span style="letter-spacing: 5px">设备未连接</span>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <!-- <span class="btm" @click="guaduanFn">
          <img src="@/assets/guangboimg/挂断.png" alt="" />
        </span> -->
        <!-- <el-button @click="qiangchahandleClose">挂断</el-button> -->
        <el-button type="primary" @click="saveqiangchaFn"> 强插 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 音乐 -->
  <el-dialog
    v-model="state.yinyueFlag"
    width="20%"
    :before-close="yinyuehandleClose1"
  >
    <template #header>
      <span style="font-weight: 700">音乐</span>
    </template>
    <div class="yinyue">
      <el-form
        ref="yinyueRef"
        :model="state.yinyueform"
        :rules="state.yinyueRules"
        label-width="auto"
      >
        <el-form-item label="播放次数" prop="yinyuenum">
          <el-input-number
            :min="1"
            v-model="state.yinyueform.yinyuenum"
            style="width: 60%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="播放文件" prop="wenjian">
          <el-select
            style="width: 100%"
            v-model="state.yinyueform.wenjian"
            multiple
          >
            <el-option
              :label="item.MusicName"
              :value="item.MusicID"
              v-for="item in state.yinpinData"
              :key="item.MusicID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="yinyuehandleClose">关闭</el-button>
        <el-button type="primary" @click="saveyinyueFn"> 开启 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 详情 -->
  <el-dialog
    v-model="state.xiangqingFlag"
    width="50%"
    :before-close="xiangqinghandleClose"
  >
    <template #header>
      <span style="font-weight: 700">详情</span>
    </template>
    <div class="xiangqing">
      <div class="left">
        <el-form label-width="150px">
          <el-row>
             <el-col :span="12"
              ><el-form-item label="分区："
                ><span class="el-form-item__label">{{
                  (state.itemDialogData?.groupName)
                }}</span></el-form-item
              ></el-col
            >
                       <el-col :span="12"
              ><el-form-item label="终端号码："
                ><span class="el-form-item__label">{{
                  (state.itemDialogData?.userNumber)
                }}</span></el-form-item
              ></el-col
            >
            <el-col :span="12"
              ><el-form-item label="IP地址："
                ><span class="el-form-item__label">{{
                  state.itemDialogData?.ip
                }}</span></el-form-item
              ></el-col
            >
                      <el-col :span="12"
              ><el-form-item label="MAC地址："
                ><span class="el-form-item__label">{{
                  state.itemDialogData?.mac
                }}</span></el-form-item
              ></el-col
            >
          </el-row>
        </el-form>
      </div>
      <div class="right" v-if="false">
        <div class="xiangqingVideo">
          <div
            style="width: 100%; height: 100%"
            v-if="
              state.detailShipinData.IsPreview !== false &&
              state.detailShipinData.dizengIP
            "
          >
            <!-- <img
            @click="WindowDetailFn"
            style="width: 100%; height: 100%; border-radius: 8px"
            :src="`${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`"
            alt=""
          /> -->
            <iframe
              :id="`iframe-detail`"
              src="/iframe.html"
              frameborder="0"
              scrolling="no"
              style="width: 100%; height: 100%"
            >
            </iframe>
            {{ sendImageUrlToIframedetail() }}
          </div>
          <div v-else class="wushipin">
            <img
              style="width: 100px; height: 100px"
              src="@/assets/guangboimg/监控摄像头.png"
              alt=""
            />
            <span style="letter-spacing: 5px; color: #000">设备未连接</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="yinyuehandleClose">取消</el-button>
        <el-button type="primary" @click="saveyinyueFn">
          确定
        </el-button>
      </div>
    </template> -->
  </el-dialog>
  </div>
</template>

<script setup>
import axios from "@/utils/request";
// import axios2 from "@/utils/requestsp";
import {
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
  computed,
  defineExpose,
  onUnmounted,
} from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import dayjs from "dayjs";
import usepagesStore from "@/store/modules/pages";
const usepageStore = usepagesStore();
// import PCMPlayer from "pcm-player";
const { proxy } = getCurrentInstance();
// const emit=defineEmits(['kxHujiaoFn'])
let showPopover = ref(-1);
let showPopover2 = ref(-1);
let showPopover3 = ref(-1);
let showPopover4 = ref(-1);
let showPopover5 = ref(-1);
const ws = ref(null);
const audioUrl = ref(null); //音乐播放地址
function validateUsername(rule, value, callback) {
  if (value === "") {
    callback(new Error("请输入本设备号码"));
  } else {
    state.tonghuaData.forEach((item) => {
      let val = item.TerminalNOs.split(",");
      if (val.includes(value)) {
        callback(new Error("本设备号码已存在"));
        return false;
      }
    });
    callback();
  }
}
//监听usepageStore中reflashTime是否是打开状态打开则刷新页面
watch(
  () => usepageStore.timeinfo.reflashTime,
  (newVal) => {
    if(newVal==true){
handleReflash()
    }
  },
  {
    deep: true,
  }
);
let state = reactive({
  scoketNum1: 0, //socket连接次数
  scoketNum2: 1, //socket连接次数
  player: null, //监听播放
  socket: null,
  yinyuebofangFlag: false, //音乐播放(广播中)
  qiangchaDetail: {}, //强插详情
  jiantingDetail: {}, //监听详情
  // shipinIp: store.state.pages.shipinIP, //import.meta.env.VITE_APP_SHIPIN_IP
  // wsUrl: store.state.pages.wsIP, //import.meta.env.VITE_APP_WS_URL
  shipinduankou: null,
  detailShipinData: {}, //详情,监控，监听查看视频
  searchData: {},
  tableheads_show: computed(() => []),
  // oneSliderValue: 3,
  // twoSliderValue: 3,
  // threeSliderValue: 3,
  // fourSliderValue: 3,
  // fiveSliderValue: 3,
  gyHeight: "",
  gridWidth: "100%", //五列每个宽度
  num: 0, //五列布局
  form: {},
  qiangchaForm: {},
  qiangchaRules: {
    TerminalNO: [
      { required: true, message: "请输入本设备号码", trigger: "blur" },
      { validator: validateUsername, trigger: "blur" },
    ],
  },
  check: {
    checkAll: true,
  },
  dislogFlag: {
    oneFlag: true,
  },
  treeData: [],
  treeId: '',
  allLength: 0, //全部数据条数
  kongxianLength: 0, //空闲数据条数
  tonghuaLength: 0, //通话数据条数
  guangboLength: 0, //广播数据条数
  jiantingLength: 0, //监听数据条数
  duanxianLength: 0, //断线数据条数
  kongxianData: [], //空闲
  tonghuaData: [], //通话
  guangboData: [], //广播
  jiantingData: [], //监听
  duanxianData: [], //断线（其它）
  yinpinData: [], //所有音频列表
  yinyueName: "", //广播选择后的音乐名称
  yinyueId: "", //广播选择后的音乐id用于选择后播放
  //首页 空闲，通话中，广播中，监听中，断线内小按钮所有弹层
  hujiaoFlag: false, //呼叫
  hujiaoxuanzeFlag: false, //呼叫选择设备
  jiankongFlag: false, //监控
  jiluFlag: false, //呼叫记录
  chakanluyinFlag: false, //查看录音
  jiantingFlag: false, //监听
  qiangchaFlag: false, //强插
  yinyueFlag: false, //音乐
  xiangqingFlag: false, //详情
  yinyueform: { yinyuenum: 1, wenjian: [] },
  yinyueRules: {
    wenjian: [{ required: true, message: "请选择播放文件", trigger: "change" }],
    yinyuenum: [{ required: true, message: "请输入播放次数", trigger: "blur" }],
  },
  topIndex: 1, //记录，今日，昨日，本周
  tableData: [], //呼叫记录表格
  pageTotal: {
    //呼叫记录分页
    currentPage: 1,
    pageSize: 20,
    total: 0,
  },
  itemDialogData: {}, //点击每一项弹层内容
  // kxitemData: {}, //空闲每一项数据
  // thitemData: {}, //通话每一项数据
  // gbitemData: {}, //广播每一项数据
  // jtitemData: {}, //监听每一项数据
  // dxitemData: {}, //断线每一项数据
  jiluDetail: {}, //记录弹层Item
  chakanData: {}, //查看录音
  yinyueDetail: {}, //音乐弹层
  kongxianhujiaoform: {}, //空闲呼叫主叫号码
  qiangchaSuccesssFlag: false, //强插成功
  cameraDetails: {}, //摄像头详情
  shipinData: [], //视频数据
   fenquListUrl: "/sip/config/group/listNoPage",
   listUrl:"/home/getUser"
});
function substrFn(val) {
  if (val?.length > 2) {
    return val.substring(0, 2) + "...";
  } else {
    return val;
  }
}
function substrFn2(val) {
  //空闲，断线
  if (val?.length > 3) {
    return val.substring(0, 3) + "...";
  } else {
    return val;
  }
}
function sliderChangeFn1(e) {
  axios
    .post("/Service/GetWebApiSetTerminalsVolume", {
      terminNOs: [state.itemDialogData.TerminalNO], //广播号码数组，为空数组[],设置全部
      volume: e, //音量1-5
    })
    .then((res) => {
      if (res.Result == true) {
        ElMessage.success(res.Msg);
        getList(state.treeId,state.searchData);
      } else {
        ElMessage.error(res.Msg);
      }
    });
}
function sliderChangeFn2(e) {
  axios
    .post("/Service/GetWebApiSetTerminalsVolume", {
      terminNOs: [state.itemDialogData.TerminalNO], //广播号码数组，为空数组[],设置全部
      volume: e, //音量1-5
    })
    .then((res) => {
      if (res.Result == true) {
        ElMessage.success(res.Msg);
        getList(state.treeId,state.searchData);
      } else {
        ElMessage.error(res.Msg);
      }
    });
}
function sliderChangeFn3(e) {
  axios
    .post("/Service/GetWebApiSetTerminalsVolume", {
      terminNOs: [state.itemDialogData.TerminalNO], //广播号码数组，为空数组[],设置全部
      volume: e, //音量1-5
    })
    .then((res) => {
      if (res.Result == true) {
        ElMessage.success(res.Msg);
        getList(state.treeId,state.searchData);
      } else {
        ElMessage.error(res.Msg);
      }
    });
}
function sliderChangeFn4(e) {
  axios
    .post("/Service/GetWebApiSetTerminalsVolume", {
      terminNOs: [state.itemDialogData.TerminalNO], //广播号码数组，为空数组[],设置全部
      volume: e, //音量1-5
    })
    .then((res) => {
      if (res.Result == true) {
        ElMessage.success(res.Msg);
        getList(state.treeId);
      } else {
        ElMessage.error(res.Msg);
      }
    });
}
function sliderChangeFn5(e) {
  axios
    .post("/Service/GetWebApiSetTerminalsVolume", {
      terminNOs: [state.itemDialogData.TerminalNO], //广播号码数组，为空数组[],设置全部
      volume: e, //音量1-5
    })
    .then((res) => {
      if (res.Result == true) {
        ElMessage.success(res.Msg);
        getList(state.treeId,state.searchData);
      } else {
        ElMessage.error(res.Msg);
      }
    });
}
const fn = () => {
  if (state.num == 1) {
    state.gridWidth = "250px";
  } else if (state.num == 2) {
    state.gridWidth = "270px";
  } else if (state.num == 3) {
    state.gridWidth = "440px";
  } else if (state.num == 4) {
    state.gridWidth = "320px";
  } else if (state.num == 5) {
    state.gridWidth = "100%";
  }
};
const allFn = () => {
  //全部
  state.num = 0;
  if (state.check.checkAll) {
    state.check.checked1 = false;
    state.check.checked2 = false;
    state.check.checked3 = false;
    state.check.checked4 = false;
    state.check.checked5 = false;
    state.gridWidth = "100%";
  } else {
  }
};
const kongxianFn = () => {
  //空闲
  if (state.check.checked1) {
    state.check.checkAll = false;
    state.num++;
  } else {
    state.num--;
  }
  fn();
};
const tonghuaFn = () => {
  //通话中
  if (state.check.checked2) {
    state.check.checkAll = false;
    state.num++;
  } else {
    state.num--;
  }
  fn();
};
const guangboFn = () => {
  //广播中
  if (state.check.checked3) {
    state.check.checkAll = false;
    state.num++;
  } else {
    state.num--;
  }
  fn();
};
const jiantingFn = () => {
  //监听中
  if (state.check.checked4) {
    state.check.checkAll = false;
    state.num++;
  } else {
    state.num--;
  }
  fn();
};
const duanxianFn = () => {
  //断线
  if (state.check.checked5) {
    state.check.checkAll = false;
    state.num++;
  } else {
    state.num--;
  }
  fn();
};
const xiala = (e) => {
  //广播中下拉选择音乐
  state.yinyueName = e.FileName;
  state.yinyueId = e.MusicID;
};
const xialaFn = (item) => {
  //切换音乐
  //下拉点击
  // let yinyueId = "";
  // let taskid = item.BroadcastGroup.split("-")[1];
  // setTimeout(() => {
  //   state.guangboData.forEach((item2) => {
  //     if (item2.TerminalNOs == item.TerminalNOs) {
  //       item2.FileinPlayed = state.yinyueName;
  //       item.FileModelList.forEach((val) => {
  //         if (val.FileName == state.yinyueName) {
  //           yinyueId = val.FileID;
  //         }
  //       });
  //       axios
  //         .post("/Service/GetWebApiTaskBroadcast", {
  //           type: 0, //int,0 切歌 1暂停 2恢复 3结束
  //           TaskID: taskid, //int,任务ID
  //           MusicID: yinyueId, //int,音乐ID，切歌时必填
  //         })
  //         .then((res) => {
  //           if (res.Result == true) {
  //             ElMessage.success(res.Msg);
  //           } else {
  //             ElMessage.error(res.Msg);
  //           }
  //         });
  //     }
  //   });
  // }, 300);
};
function showPopoverFn(index, item2) {
  state.itemDialogData = {};
  state.itemDialogData = item2;
  //空闲点击显示弹层
  // showPopover.value = index;
  showPopover.value = true; //popover显示
  showPopover2.value = -1;
  showPopover3.value = -1;
  showPopover4.value = -1;
  showPopover5.value = -1;
}
function closePopoverFn() {
  //空闲点击关闭弹层
  showPopover.value = -1;
  if (proxy.$refs["popoverRef"]) {
    proxy.$refs["popoverRef"].forEach((item) => {
      item.hide();
    });
  }
}
function showPopoverFn2(index, item2) {
  console.log(item2, "通话item");
  state.itemDialogData = {};
  state.itemDialogData = item2;
  //通话中点击显示弹层
  showPopover2.value = index;
  showPopover.value = -1;
  showPopover3.value = -1;
  showPopover4.value = -1;
  showPopover5.value = -1;
}
function closePopoverFn2() {
  //通话中点击关闭弹层
  showPopover2.value = -1;
  if (proxy.$refs["popoverRef2"]) {
    proxy.$refs["popoverRef2"].forEach((item) => {
      item.hide();
    });
  }
}
function showPopoverFn3(index, item2, item) {
  // if (item && item.FileModelList[0].FileID != 0) {//注释此行代码，否则使用录音功能此行代码不执行
  state.itemDialogData = {};
  state.itemDialogData = item2;
  //广播中点击显示弹层
  showPopover3.value = index;
  showPopover2.value = -1;
  showPopover.value = -1;
  showPopover4.value = -1;
  showPopover5.value = -1;
  // }
}
function closePopoverFn3() {
  //广播中点击关闭弹层
  showPopover3.value = -1;
  if (proxy.$refs["popoverRef3"]) {
    proxy.$refs["popoverRef3"].forEach((item) => {
      item.hide();
    });
  }
}
function showPopoverFn4(item, index, item2) {
  state.itemDialogData = {};
  state.itemDialogData = item2;
  console.log(item, "监听item");
  console.log(item2, "监听item2");
  //监听中点击显示弹层
  showPopover4.value = index;
  showPopover2.value = -1;
  showPopover3.value = -1;
  showPopover.value = -1;
  showPopover5.value = -1;
}
function closePopoverFn4() {
  //监听中点击关闭弹层
  showPopover4.value = -1;
  if (proxy.$refs["popoverRef4"]) {
    proxy.$refs["popoverRef4"].forEach((item) => {
      item.hide();
    });
  }
}
function showPopoverFn5(index, item2) {
  state.itemDialogData = {};
  state.itemDialogData = item2;
  //断线点击显示弹层
  showPopover5.value = index;
  showPopover2.value = -1;
  showPopover3.value = -1;
  showPopover4.value = -1;
  showPopover.value = -1;
}
function closePopoverFn5() {
  //断线点击关闭弹层
  showPopover5.value = -1;
  if (proxy.$refs["popoverRef5"]) {
    proxy.$refs["popoverRef5"].forEach((item) => {
      item.hide();
    });
  }
}
//首页 空闲，通话中，广播中，监听中，断线内小按钮所有弹层
//呼叫
function hujiaoFn(item) {
  console.log(item, "呼叫item");
  // emit('kxHujiaoFn')
  proxy.$refs["guangbopanelCard"].kongxiantonghua(item);
  // let val=String(item.TerminalNO)
  // shipinChakan(val);
  // state.hujiaoFlag = true;
}
function hujiaohandleClose() {
  //呼叫关闭
  state.hujiaoFlag = false;
  state.hujiaoxuanzeFlag = false;
}
function savehujiaoxuanzeFn() {
  //呼叫选择设备保存
  state.hujiaoxuanzeFlag = false;
}
//监控
function jiankongFn(item) {
  shipinChakan(item.userNumber);
  state.jiankongFlag = true;
  // setTimeout(() => {
  // sendImageUrlToIframejiankong()
  // }, 500);
}
function jiankonghandleClose() {
  //监控关闭
  state.jiankongFlag = false;
  state.detailShipinData = {};
  delFn();
}
//记录
function jiluFn(item) {
  console.log(item, "记录item");
  state.jiluDetail = item;
  state.jiluDetail.zhujiaoTerminalNO = item.userNumber;
  state.jiluDetail.callType = '';
  // timeFn();
  state.topIndex = 1;
  let date = getTodayDate();
  state.jiluDetail.time = [date + "00:00:00", date + "23:59:59"];
  getHeader()
  // jilusearchFn();
  // state.jiluFlag = true;
}
function timeFn() {
  let time = dayjs().format("YYYY-MM-DD");
  let month = dayjs().format("MM");
  let years = dayjs().format("YYYY");
  let days = dayjs().format("DD");
  let time2 = dayjs().format("YYYY-MM-DD HH:mm:ss");
  let val = Number(month) - 1;
  let val2 = String(val).length == 1 ? "0" + val : val;
  let str = years + "-" + val2 + "-" + days + " 00:00:00";
  state.jiluDetail.time = [str, time2];
}
function jiluhandleClose() {
  //记录关闭
  state.jiluFlag = false;
  state.tableData = [];
  state.jiluDetail = {};
}
function jilusearchFn(val) {
  //呼叫记录查询
  if (val == "search") {
    state.topIndex = 0;
  }
  axios.post('/sip/contactRecord/list',{
    queryStartTime: state.jiluDetail.time[0],
    queryEndTime: state.jiluDetail.time[1],
    pageNum:state.pageTotal.currentPage,
    pageSize:state.pageTotal.pageSize,
    status:state.jiluDetail.callType,//是否接通，1接通，0未接通 ''全部
    callerNumber:state.jiluDetail.zhujiaoTerminalNO,//主叫号码
    calleeNumber:state.jiluDetail.TerminalNO,//被叫号码
  })
    .then((res) => {
        if (res.data?.list?.length >= 0) {
            state.tableData = res.data.list;
          state.pageTotal.total = res.data.total;
          state.jiluFlag = true;
        }
    });
}
function timestampToDateTime(timestamp) {
  // 将时间戳转换为毫秒
  var date = new Date(timestamp);
  //获取年月日时分秒
  var year = date.getFullYear();
  var month = date.getMonth() + 1; // 月份是从0开始的
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();

  // 格式化月份和日期，如果需要的话
  month = ("0" + month).slice(-2);
  day = ("0" + day).slice(-2);
  hours = ("0" + hours).slice(-2);
  minutes = ("0" + minutes).slice(-2);
  seconds = ("0" + seconds).slice(-2);

  // 返回格式化后的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function jiluresetFn() {
  //未接来电重置
  // state.jiluDetail = "";
  state.jiluDetail.zhujiaoTerminalNO = "";
  state.jiluDetail.TerminalNO = "";
  state.jiluDetail.callType = '';
  timeFn();
}
function jinriFn() {
  //今日
  state.topIndex = 1;
  let date = getTodayDate();
  state.jiluDetail.time = [date + "00:00:00", date + "23:59:59"];
  jilusearchFn();
}
function zuoriFn() {
  //昨日
  state.topIndex = 2;
  let date = getYesterdayDate();
  state.jiluDetail.time = [date + " " + "00:00:00", date + " " + "23:59:59"];
  jilusearchFn();
}
function benzhouFn() {
  //本周
  state.topIndex = 3;
  const { start, end } = getThisWeekDates();
  let date = start.year + "-" + start.month + "-" + start.day + " ";
  let date2 = end.year + "-" + end.month + "-" + end.day + " ";
  state.jiluDetail.time = [date + " " + "00:00:00", date2 + " " + "23:59:59"];
  jilusearchFn();
}
function getTodayDate() {
  //今日日期
  const now = new Date();
  const year = now.getFullYear(); // 获取当前年份
  let month = now.getMonth() + 1; // 获取当前月份，注意getMonth()返回的是0-11，所以需要加1
  let day = now.getDate(); // 获取当前日期
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  const date = year + "-" + month + "-" + day + " ";
  return date;
}
function getYesterdayDate() {
  //昨日日期
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  const year = yesterday.getFullYear();
  const month = ("0" + (yesterday.getMonth() + 1)).slice(-2); // 月份是从0开始的
  const day = ("0" + yesterday.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
function getThisWeekDates() {
  //本周日期
  const now = new Date();
  const dayOfWeek = now.getDay();
  const dayOffset = dayOfWeek - 1;

  const startDate = new Date(now - dayOffset * 86400000); // 当前日期减去本周第一天的偏移量
  const endDate = new Date(startDate.getTime() + 6 * 86400000); // 开始日期加上6天的毫秒数

  const startYear = startDate.getFullYear();
  let startMonth = startDate.getMonth() + 1; // 月份是从0开始的
  let startDay = startDate.getDate();
  startMonth = startMonth < 10 ? "0" + startMonth : startMonth;
  startDay = startDay < 10 ? "0" + startDay : startDay;
  const endYear = endDate.getFullYear();
  let endMonth = endDate.getMonth() + 1;
  let endDay = endDate.getDate();
  endMonth = endMonth < 10 ? "0" + endMonth : endMonth;
  endDay = endDay < 10 ? "0" + endDay : endDay;
  return {
    start: { year: startYear, month: startMonth, day: startDay },
    end: { year: endYear, month: endMonth, day: endDay },
  };
}
function chakanluyinFn(scope) {
  //查看录音
  console.log(scope.row, "scope.row");
  state.chakanData = scope.row;
  if (scope.row.file && scope.row.file.id) {
    axios
      .get(`/common/downloadRecord?fileId=${scope.row.file.id}`, {
        // params: {
        //   fileId: row.id,
        // }
        responseType: "blob",
      })
      .then((res) => {
        console.log(res, "res");
        playAudio(res);
        state.chakanluyinFlag = true;
      });
  }else{
    ElMessage.warning("录音文件不存在");
  }
}
const playAudio = async (filePath) => {
  try {
    setTimeout(() => {
      //二进制流播放
      const blob = new Blob([filePath], { type: "audio/wav" });
      const audioUrl = URL.createObjectURL(blob);
      proxy.$refs["audioPlayer"].src = audioUrl;
      // proxy.$refs["audioPlayer"].src = `data:audio/mpeg;base64,${filePath}`;
      proxy.$refs["audioPlayer"].load(); //重新加载
      // proxy.$refs['audioPlayer'].play();
      proxy.$refs["audioPlayer"].pause(); //暂停
      //播放结束后需手动释放临时 URL 避免内存泄漏
      proxy.$refs["audioPlayer"].onended = () => {
        URL.revokeObjectURL(audioUrl);
      };
    }, 500);
  } catch (error) {
    console.error("播放失败:", error);
  }
};
function chakanluyinhandleClose() {
  //查看录音关闭
  proxy.$refs["audioPlayer"].src = null;
  state.chakanluyinFlag = false;
}
// 监听
function jtFn(item) {
  state.jiantingDetail = item; //监听弹层内，强插，强拆需用到
  console.log(item, "监听item");
  console.log(state.itemDialogData, "空闲item");
  axios.post("/callingCenter/eavesdrop/start",{
    sessionId: item.sessionId,
    listenerNumber: '1003',//监听者号码
}).then((res) => {
if(res.code == 200){
  refreshDataFn()
}
})
}
function connectWebSocket() {
  //连接监听websocket
  ws.value = new WebSocket(`${state.wsUrl}`);
  console.log(ws.value, "ws");
  ws.value.onopen = function (event) {
    console.log("WebSocket 连接已打开", event);
  };
  ws.value.onmessage = function (event) {
    console.log("收到消息", event);
    // console.log(ws.value, "ws");
    // 假设服务器发送的是base64字符串
    const base64Data = event.data;
    console.log(base64Data, "base64");
    console.log(state.scoketNum1++, "scoketNum");
    WebSocketplayAudio(base64Data);
  };
}
const WebSocketplayAudio = (base64Data) => {
  // Base64编码的PCM音频数据
  // const base64 = atob(base64Data);
  // const bytes = new Uint8Array(base64.length);
  // for (let i = 0; i < base64.length; i++) {
  //   bytes[i] = base64.charCodeAt(i);
  // }
  // const arrayBuffer = bytes.buffer;
  // state.player = new PCMPlayer({
  //   // inputCodec: "Int16", //pcm格式音频，需要设置inputCodec为Int16
  //   encoding: "16bitInt",
  //   channels: 1, //单声道
  //   sampleRate: 8000, //采样率
  //   flushTime: 1000, //刷新时间
  //   onended: (e) => {
  //     //播放结束
  //     console.log(state.scoketNum2++, "scoketNum2");
  //     console.log("播放结束", e);
  //   },
  // });
  // state.player.feed(arrayBuffer);
};

function jiantinghandleClose() {
  //监听关闭
  // ws.value.close();
  // proxy.$refs["guangbopanelCard"].guaduanFn();
  // state.jiantingFlag = false;
  jiantingGuaduanFn();
  delFn();
  state.jiantingDetail = {};
  state.detailShipinData = {};
}
function delFn() {
  //删除视频
  if (state.cameraDetails?.CameraID) {
    axios2
      .post("api/Config/SetCamera", {
        DeviceKey: state.cameraDetails.CameraID,
        OpType: 1, //移除摄像头配置项
      })
      .then((res) => {});
  }
}
function qiangchahandleClose() {
  //监听强插关闭
  if (state.qiangchaSuccesssFlag == true) {
    proxy.$refs["guangbopanelCard"].guaduanFn(
      "danguaduan",
      state.qiangchaForm.TerminalNO
    );
    state.qiangchaSuccesssFlag = false;
  }
  state.qiangchaFlag = false;
  state.detailShipinData = {};
  state.qiangchaDetail = {};
  proxy.$refs["qiangchaRef"].clearValidate();
  state.qiangchaForm.TerminalNO = "";
}
function jtDialogcharuFn() {
  //监听弹层强插
  state.qiangchaDetail = state.jiantingDetail;
  let val = state.jiantingDetail.TerminalNOs.split(",")[0];
  shipinChakan(val);
  state.qiangchaFlag = true;
}
function jtDialogqiangchaiFn() {
  //监听弹层强拆
  jtqiangchaiFn(state.jiantingDetail);
}
  //监听强插
function jtcharuFn(item) {
  console.log(item, "强插item");
  state.qiangchaDetail = item;
   ElMessageBox.confirm("确定强插？", "强插", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post("/callingCenter/threeWay",
      {
        callerNumber:'1003',
        channelId:item.baseInfo[item.baseInfo.length-1].channelId,
      }
    ).then((res) => {
      refreshDataFn()
    })
  });
  // let val = item.userNumber;
  // shipinChakan(val);
  // setTimeout(() => {
  //   sendImageUrlToIframejiantingqiangcha()
  // }, 500);
  // state.qiangchaFlag = true;
}
  //监听强拆
function jtqiangchaiFn(item,item2) {
  console.log(item, "item");
  console.log(state.itemDialogData,'state.itemDialogData')//获取当前点击项
  ElMessageBox.confirm("确定强拆？", "强拆", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
   if(item.sessionId.includes("cf_")&&item2=='quanbu'){//会议室(cf-)，广播(bc-)
    axios.post(`/callingCenter/conference/close/${item.sessionId}`).then(()=>{
             setTimeout(() => {
      refreshDataFn()
          },500)
    })
   }else if(item2=='dan'){
    axios.post("/callingCenter/intercept",{channelId:state.itemDialogData?.channelId?state.itemDialogData.channelId:item.baseInfo[item.baseInfo.length-1].channelId}).then(()=>{
            setTimeout(() => {
      refreshDataFn()
          },500)
    })
   }else{//关闭非会议室的对讲
        axios.post("/callingCenter/intercept",{channelId:item.baseInfo[0].channelId}).then(()=>{
          setTimeout(() => {
      refreshDataFn()
          },500)
    })
    nextTick(() => {
      axios.post("/callingCenter/intercept",{channelId:item.baseInfo[item.baseInfo.length-1].channelId}).then(()=>{
           setTimeout(() => {
      refreshDataFn()
          },500)
    })
    })
   }
  });
}
function saveqiangchaFn() {
  //监听强插保存
  let taskid = state.qiangchaDetail.CallGroup.split("-")[1];
  proxy.$refs["qiangchaRef"].validate((isOk) => {
    if (isOk) {
      axios
        .post("/Service/GetWebApiTaskDualWayTalk", {
          type: 1, //int,0 强拆（挂机） 1强插（带入一个号码） 2强挂（剔除一个号码） 3开启录音 4结束录音
          TaskID: taskid, //int,任务ID
          TerminalNOs: [state.qiangchaForm.TerminalNO], //int[]本设备号
        })
        .then((res) => {
          if (res.Result == true) {
            ElMessage.success("强插成功");
            // state.qiangchaFlag = false;
            state.jiantingFlag = false;
            state.qiangchaSuccesssFlag = true;
            refreshDataFn();
          } else {
            ElMessage.error(res.Msg);
          }
        });
    }
  });
}
// 音乐
function yinyueFn(item, val) {
  if (val && val == "guangbozhong") {
    state.yinpinData = item.FileModelList.map((res) => {
      return { MusicName: res.FileName, MusicID: String(res.FileID) };
    });
  }
  state.yinyueDetail = item;
  state.yinyueFlag = true;
}
function yinyuehandleClose1() {
  getAllYinpinList();
  proxy.$refs["yinyueRef"].clearValidate();
  state.yinyueFlag = false;
}
function yinyuehandleClose() {
  //音乐关闭
  proxy.$refs["yinyueRef"].validate((isOk) => {
    if (isOk) {
      axios
        .post("/Service/GetWebApiControlBroadcast", {
          type: 1, //0 开始播放 1关闭播放
          TerminalNOs: [state.yinyueDetail.TerminalNO], //广播号码集合
          MusicIDs: state.yinyueform.wenjian, //音乐ID集合，开始播放必填
          frequency: state.yinyueform.yinyuenum, //播放次数
        })
        .then((res) => {
          if (res.Result == true) {
            ElMessage.success("关闭成功");
            state.yinyueFlag = false;
            refreshDataFn();
          } else {
            ElMessage.error(res.Msg);
          }
        });
    }
  });
}
function saveyinyueFn() {
  //音乐开启
  let obj = {
    type: 0, //0 开始播放 1关闭播放
    TerminalNOs: [state.yinyueDetail.TerminalNO], //广播号码集合
    MusicIDs: state.yinyueform.wenjian, //音乐ID集合，开始播放必填
    frequency: state.yinyueform.yinyuenum, //播放次数
  };
  proxy.$refs["yinyueRef"].validate((isOk) => {
    if (isOk) {
      axios.post("/Service/GetWebApiControlBroadcast", obj).then((res) => {
        if (res.Result == true) {
          ElMessage.success("开启成功");
          proxy.$refs["yinyueRef"].clearValidate();
          state.yinyueFlag = false;
          state.yinyueform.wenjian = [];
          state.yinyueform.yinyuenum = 1;
          refreshDataFn();
        } else {
          ElMessage.error(res.Msg);
        }
      });
    }
  });
}
function shipinChakan(TerminalNO) {
  //详情查看视频
  // axios
  //   .post("/Service/GetWebApiCameraList", {
  //     //获取摄像头信息
  //     CameraID: -1,
  //     TerminalNO: TerminalNO, //string
  //     CameraIP: "",
  //     Place: "",
  //     // CameraID: node.CameraID, //0,获取所有
  //   })
  //   .then((res) => {
  //     if (res.DataList?.length > 0) {
  //       state.shipinData = res.DataList;
  //       state.cameraDetails = res.DataList[0];
  //       getCameraList(res.DataList);
  //     }
  //   });
}
function getCameraList(res) {
  axios2
    .post("api/Config/GetCameraRunState", {
      DeviceKey: String(res[0]?.CameraID), //string,设备标识,为空，查询所有,非空，查询指定设备标识
      DeviceIp: res[0]?.CameraIP, //string,设备IP地址,为空，查询所有,非空，查询指定设备IP地址
      SdkType: 0, //int,设备类型,0     查询全部,其它  查询指定类型
    })
    .then((res2) => {
      state.detailShipinData = {};
      if (res2.Items.length > 0) {
        // setTimeout(() => {
        state.detailShipinData = res2.Items[0];
        // state.detailShipinData.DeviceKey = res2.Items[0].DeviceKey;
        state.detailShipinData.dizengIP = state.shipinduankou;
        // state.detailShipinData.OnlineStatus = res2.Items[0].OnlineStatus;
        // }, 500);
      } else {
        SetCamera();
      }
    });
}
function SetCamera() {
  let obj = {
    DeviceKey: state.cameraDetails.CameraID, //设备唯一性标识string
    OpType: 0, //操作类型，OperateTypeEnum 可以通过 GetEnumDetails 接口查询具体的枚举定义
    //0	摄像头配置无则新增，有则替换（默认值）
    //1	移除摄像头配置项
    //2	摄像头配置新增（预留，暂不使用）
    //3	当前摄像头配置变更（预留，暂不使用）
    //注：OpType 值为 1 时，只需要传入 DeviceKey 和 OpType 这两个参数，其它的需要传入更多的参数
    // RenderMode: "1", // string,呈现模式，可以通过 GetEnumDetails 接口查询具体的枚举定义
    //0	不呈现（默认值）
    //1	通过CvInvoke呈现
    // ExecType: "2", //DeviceExecTypeEnum 执行类型０ None    无动作１ Login   仅登录２ Preview  执行预览（默认值）
    // 摄像头类型 0海康 1大华 (c#接口)
    DeviceType:
      state.cameraDetails.CameraType == 0
        ? 1
        : state.cameraDetails.CameraType == 1
        ? 2
        : 0, //SdkEnum 设备类型，0	无,1	海康摄像头（默认值）,2	大华摄像头,3	RTSP – 暂不实现,4	USB – 暂不实现,5	HikRoot – 暂不实现
    DeviceIp: state.cameraDetails.CameraIP, //string 设备IP地址
    DevicePort: state.cameraDetails.CameraPort, //int 设备端口0	海康默认值  8000,1	大华默认值  37777
    UserName: state.cameraDetails.AccountNum, //string 用户名
    Password: state.cameraDetails.PassWord, //string 密码
    // Channel: "", //int通道号，根据实际配置填写1 （默认值）
    // StreamType: 1, //int,码流,0 主码流,1 子码流（默认值）
    // PreviewMode: "", //PreviewModeEnum 预览模式,0	Direct = 0,1	Callback = 1,2	DirectCallback = 2（默认值）
    // GrayDisplay: "", //bool 灰度显示,true    灰度显示,false   彩色显示（默认值）
    // SetFrameRate: "", //double,设定帧率，有效范围为 0.1 到 25,(默认值 8 )
  };
  //设置摄像头信息
  axios2.post("api/Config/SetCamera", obj).then((res) => {
    if (res.Msg == "执行成功.") {
      setTimeout(() => {
        state.cameraFlag = false;
        getCameraList(state.shipinData);
      }, 5000);
    }
  });
}
function WindowDetailFn() {
  //详情浏览器查看视频
  window.open(
    `${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`,
    "_blank"
  );
}
//详情
function xiangqingFn() {
  //通话中，广播中，监听中
  // state.itemDialogData=item
  console.log(state.itemDialogData, "详情state.itemDialogData");
  // shipinChakan(state.itemDialogData.TerminalNO);
  // setTimeout(() => {
  //   sendImageUrlToIframedetail()
  // }, 500);
  state.xiangqingFlag = true;
}
function xiangqingFn2(item) {
  //空闲，断线
  // shipinChakan(item.TerminalNO);
  state.itemDialogData = item;
  state.xiangqingFlag = true;
  console.log(state.itemDialogData, "详情空闲,断线item");

}
function detailFenquFn(val) {
  console.log(val, "val");
  let label = null;
  state.treeData.forEach((item) => {
    if (item.id == val) {
      label = item.label;
    }
  });
  return label;
}
function xiangqinghandleClose() {
  state.xiangqingFlag = false;
  state.detailShipinData = {};
  delFn();
}
//监听中挂断websocket断开
function jiantingGuaduanFn(item, item2) {
  // refreshDataFn(); //刷新数据
  console.log(item,'jtgd')
  proxy.$refs["guangbopanelCard"].guaduanFn("danguaduan");
  state.jiantingFlag = false;
}
//挂断
function guaduanFn(item,item2) {
  console.log(state.itemDialogData, "state.itemDialogData");
  console.log(state.tonghuaData, "state.tonghuaData");
  console.log(item, "item");
  ElMessageBox.confirm("确定挂断？", "挂断", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    showPopover.value = -1;
    showPopover2.value = -1;
    showPopover3.value = -1;
    showPopover4.value = -1;
    showPopover5.value = -1;
    // usepageStore.tonghuaLength=item.baseInfo?.length;
    proxy.$refs["guangbopanelCard"].guaduanFn(item);
    // if(item.baseInfo.length<=2){
    // proxy.$refs["guangbopanelCard"].guaduanFn();
    // }else{
    //   //关闭会议室
    //   axios.post(`/callingCenter/conference/close/${item.sessionId}`, {
    //   })
    // }
  });
}
//暂停/继续
function zantingFn(item) {
  console.log(item, "item");
  console.log(state.itemDialogData, "state.itemDialogData");
  // state.yinyuebofangFlag = !state.yinyuebofangFlag;
  //playStatus：0 待播放 1 播放中 2 暂停 3 完成
  if (item.playStatus == 1) {
    //播放
    item.playStatus == 2;
    // obj.type = 1;
  } else if (item.playStatus == 2) {
    //暂停
    item.playStatus == 1;
    // obj.type = 2;
  }
  // if (!state.yinyuebofangFlag) {
  //   //继续
  //   obj.type = 2;
  // } else {
  //   //暂停
  //   obj.type = 1;
  // }
  axios.post(`/callingCenter/conference/pause/${item.sessionId}`).then((res) => {
          if(res.code==200){
          setTimeout(() => {
           getList(state.treeId,state.searchData);
          },1000)
          ElMessage.success(res.msg);
         }else{
          ElMessage.error(res.msg);
         }
  });
}
//结束
function jieshuFn(item, item2) {
  console.log(item,'item')
  console.log(state.itemDialogData,'state.itemDialogData')
  console.log(item2,'item2')
  ElMessageBox.confirm("确定结束？", "结束", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    if (item2 == "danjieshu") {//单个广播关闭
      axios
        .post("/callingCenter/conference/kick", {
          roomId: state.itemDialogData.sessionId,
          userNo:state.itemDialogData.userNumber,
        })
        .then((res) => {
         if(res.code==200){
          setTimeout(() => {
           getList(state.treeId,state.searchData);
          },1000)
          ElMessage.success(res.msg);
         }else{
          ElMessage.error(res.msg);
         }
        });
    } 
    else {//全部关闭
      let sessionId=item.sessionId
      axios
        .post(`/callingCenter/conference/close/${sessionId}`, {
        })
        .then((res) => {
           if(res.code==200){
             setTimeout(() => {
           getList(state.treeId,state.searchData);
          },1000)
          ElMessage.success(res.msg);
         }else{
          ElMessage.error(res.msg);
         }
        });
    }
  });
}
function pagechange(val) {
  //呼叫记录弹层分页
  state.pageTotal.currentPage = val.currentPage;
  state.pageTotal.pageSize = val.pageSize;
  jilusearchFn()
}
const queryFn = () => {
  //查询
getList(state.treeId,state.searchData)
};
const resetFn = () => {
  //重置
  state.searchData = {};
};
function handleNodeClick(node) {
  //左侧树形点击
  state.treeId = node.id==0?'':node.id;
  console.log(state.treeId, " state.treeId");
  getList(state.treeId,state.searchData);
}
const getTreeList = () => {
  //左侧树形
  let arr = [];
  let children = [];
  let total = 0;
  axios
    .post(state.fenquListUrl, { })
    .then((res) => {
      if (res.data?.length >= 0) {
        state.treeData = [];
        total = getSumFromObjects(res.data, "TerminalCount");
        function getSumFromObjects(arr, prop) {
          return arr.reduce((a, curr) => a + curr[prop], 0);
        }
        arr.push({
          id: 0,
          label: "全部",
          value: total,
        });
        res.data.forEach((item) => {
            arr.push({
              id: item.id,
              label: item.groupName,
              value: 0,
            });
        });
        state.treeData = arr;
      }
    });
};
const refreshDataFn = () => {
  //底部呼叫成功后刷新数据
  getTreeList(); //左侧树形
  // getTonghuaList(); //通话中数据
  // getGuangboList(); //广播中数据
  // getJiantingList(); //监听中数据
  // getAllYinpinList(); //所有音频列表
  getList(state.treeId,state.searchData); //全部数据
};
const getList = (id,val) => {
  //全部数据
  axios
    .post(state.listUrl, {
groupId: id,
userNumber: val?.userNumber?Number(val.userNumber):null,
type:val?.type?Number(val.type):null,
    })
    .then((res) => {
      if (res.data) {
        state.kongxianData = [];
        state.tonghuaData = [];
        state.guangboData = [];
        state.jiantingData = [];
        state.duanxianData = [];
        state.allLength = 0;
        state.kongxianLength = 0;
        state.tonghuaLength = 0;
        state.guangboLength = 0;
        state.jiantingLength = 0;
        state.duanxianLength = 0;
        state.kongxianLength=res.data?.idle?.baseInfo?res.data.idle.baseInfo.length:0;//空闲
        state.tonghuaLength=res.data?.calling?res.data.calling.length:0;//通话中
        state.guangboLength=res.data?.broadcast?res.data.broadcast.length:0;//广播中
        state.jiantingLength=res.data?.eavesdrop?res.data.eavesdrop.length:0;//监听中
        state.duanxianLength=res.data?.offline?.baseInfo?res.data.offline.baseInfo.length:0;//断线
        state.allLength =
          state.kongxianLength +
          state.tonghuaLength +
          state.guangboLength +
          state.jiantingLength +
          state.duanxianLength;
          //数据
state.kongxianData=res.data?.idle?res.data.idle:[];//空闲
state.tonghuaData=res.data?.calling?res.data.calling:[];//通话中
state.guangboData=res.data?.broadcast?res.data.broadcast:[];//广播中
state.jiantingData=res.data?.eavesdrop?res.data.eavesdrop:[];//监听中
state.duanxianData=res.data?.offline?res.data.offline:[];//断线
        //详情弹层关闭
        showPopover.value = -1;
        showPopover2.value = -1;
        showPopover3.value = -1;
        showPopover4.value = -1;
        showPopover5.value = -1;
      }
    });
};
const getTonghuaList = () => {
  //通话中数据Status 3
  state.tonghuaData = [];
  state.tonghuaLength = 0;
  axios.post("/Service/GetWebApiRealCommunication").then((res) => {
    if (res.DataList?.length >= 0) {
      state.tonghuaData = res.DataList;
      state.tonghuaLength = state.tonghuaData?.length;
    }
    if (res.DataList?.length > 0) {
      proxy.$refs["guangbopanelCard"].thwebscoket();
      axios.post("/Service/GetWebApiRealCommunication").then((res) => {
        //实时获取通话数据，此请求用于别的电脑没有LoaclStorage的情况
        if (res.DataList?.length > 0) {
          let obj = {
            num1: true,
            num2: res.DataList[0].CallDurationstr,
            num3: [],
          };
          let val = res.DataList[0].TerminalNOs.split(",");
          obj.num3 = val.slice(1);
          console.log(obj, "val989");
          localStorage.setItem("thPhone", JSON.stringify(obj));
        }
      });
    } else {
      if (proxy.$refs["guangbopanelCard"]?.state?.timers != null) {
        clearInterval(proxy.$refs["guangbopanelCard"]?.state?.timers);
      }
    }
  });
};
const getGuangboList = () => {
  //广播中数据 Status 1
  state.guangboData = [];
  state.guangboLength = 0;
  axios.post("/Service/GetWebApiRealPlay", { TaskID: 0 }).then((res) => {
    if (res.DataList?.length >= 0) {
      state.guangboData = res.DataList;
      state.guangboLength = state.guangboData?.length;
      // state.yinpinData = res.DataList[0].FileModelList
    }
  });
};
const getJiantingList = () => {
  //监听中数据
  state.jiantingData = [];
  state.jiantingLength = 0;
  axios.post("/Service/GetWebApiRealListening").then((res) => {
    if (res.DataList?.length >= 0) {
      state.jiantingData = res.DataList;
      state.jiantingLength = state.jiantingData?.length;
    }
    if (state.jiantingData.length > 0) {
      setTimeout(() => {
        connectWebSocket();
      }, 500);
    }
  });
};
const getAllYinpinList = () => {
  //所有音频列表
  axios.post("/Service/GetWebApiMusicList", {}).then((res) => {
    if (res.DataList?.length >= 0) {
      state.yinpinData = res.DataList;
    }
  });
};
// const timeInfo = computed(() => store.state.pages.timeinfo);
let timerId = null;

const handleReflash = () => {
  if (usepageStore.timeinfo.reflashTime==true) {
      clearInterval(timerId);
      handleInterval();
  } else {
    clearInterval(timerId);
  }
};
const handleInterval = () => {
  timerId = setInterval(() => {
    refreshDataFn();
  }, usepageStore.timeinfo.counttime);
};

function sendImageUrlToIframejiankong(index, item) {
  //监控视频
  //含有控制播放的列表布局
  let imageUrl = `${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`;
  console.log(imageUrl, "imageUrl");
  setTimeout(() => {
    const iframe = document.querySelector(`#iframe-jiankong`);
    setTimeout(() => {
      if (iframe) {
        iframe.contentWindow.postMessage(
          {
            type: "updateImageUrl",
            imageUrl: imageUrl,
            // index: index,
          },
          "*"
        );
      }
    }, 400);
    // 确保iframe存在
  });
}
function sendImageUrlToIframejianting(index, item) {
  //监听视频
  //含有控制播放的列表布局
  let imageUrl = `${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`;
  setTimeout(() => {
    const iframe = document.querySelector(`#iframe-jianting`);
    setTimeout(() => {
      if (iframe) {
        iframe.contentWindow.postMessage(
          {
            type: "updateImageUrl",
            imageUrl: imageUrl,
            // index: index,
          },
          "*"
        );
      }
    }, 400);
    // 确保iframe存在
  });
}
function sendImageUrlToIframejiantingqiangcha(index, item) {
  //监听强插
  //含有控制播放的列表布局
  let imageUrl = `${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`;
  console.log(imageUrl, "imageUrl");
  setTimeout(() => {
    const iframe = document.querySelector(`#iframe-qiangcha`);
    setTimeout(() => {
      if (iframe) {
        iframe.contentWindow.postMessage(
          {
            type: "updateImageUrl",
            imageUrl: imageUrl,
            // index: index,
          },
          "*"
        );
      }
    }, 400);
    // 确保iframe存在
  });
}
function sendImageUrlToIframedetail(index, item) {
  //详情视频
  //含有控制播放的列表布局
  let imageUrl = `${state.shipinIp}${state.detailShipinData.dizengIP}/?id=${state.detailShipinData.DeviceKey}`;
  console.log(imageUrl, "imageUrl");
  setTimeout(() => {
    const iframe = document.querySelector(`#iframe-detail`);
    setTimeout(() => {
      if (iframe) {
        iframe.contentWindow.postMessage(
          {
            type: "updateImageUrl",
            imageUrl: imageUrl,
            // index: index,
          },
          "*"
        );
      }
    }, 400);
    // 确保iframe存在
  });
}
const getHeader = () => {
  //获取头部数据
  let table_headers = reactive({});
  // axios.get('/system/vxeheaders/getHeaders').then((res) => {
  axios.get("/vxeheaders/getHeaders").then((res) => {
    let set = new Set();
    res.data.forEach((item) => {
      set.add(item.name);
    });
    set.forEach((item) => {
      let arr = [];
      res.data.forEach((item2) => {
        if (item2.name === item) {
          arr.push(item2);
        }
      });
      table_headers[item] = arr;
    });
state.tableheads_show = computed(() => {
  return table_headers.t_sip_contact_record.filter(item => item.show === 1)
})
    //show为1的返回表头
    jilusearchFn();
  });
};
defineExpose({ getTonghuaList });
onMounted(() => {
  state.gyHeight=`calc(100vh - ${document.querySelector(".top").offsetHeight+330}px)`
  getTreeList(); //左侧树形
  getList('')
});
onUnmounted(() => {
  // if(timerId){
  //   clearInterval(timerId);
  // }
})
</script>
<style scoped lang="scss">
.shouye {
  width: 100%;
  // height: 100%;
  .bottom {
    width: 100%;
    height: 100%;

    .scrollbar {
      height: calc(v-bind("state.gyHeight") - 42px);
      overflow-y: auto;
      padding: 10px 10px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      /* 定义滚动条样式 */
      &::-webkit-scrollbar {
        width: 5px;
        // height: 0.5rem;
        background-color: #cbcbcb;
        border-radius: 30px;
        // background-color:transparent;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
        border-radius: 30px;
        background-color: #f3efef;
        // background-color:transparent;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 30px;
        box-shadow: inset 0 0 0px rgba(237, 44, 37, 0.5);
        background-color: #c8c9cc;
        // background-color:transparent;
      }
    }

    .gongyong {
      height: v-bind("state.gyHeight");
      // width: 19%;
      // border-radius: 5px;
      // border: 1px solid #F2F4F5;
    }

    .all {
      //全部
      display: flex;
      justify-content: space-between;

      .one {
        width: 100%;
        margin-right: 8px;

        .one-item {
          border-radius: 5px;
          border: 1px solid #d9ecff;
          .title {
            border-radius: 5px 5px 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            letter-spacing: 10px;
            background-color: #d9ecff;
          }

          .content {
            width: v-bind("state.gridWidth");
            height: 118px;
            border-radius: 0 5px 5px 0;
            border-left: 3px solid #409eff;
            // background-color: v-bind('state.bgcolor');
            background-color: #f4f9ff;
            color: v-bind("state.ftcolor");
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 20px 0 0 0;
            text-align: center;
            // margin-top: -5px;
            margin-bottom: 8px;
            position: relative;
            //             .hover-popover{
            //               position: absolute;
            //               top: 130px;
            //               z-index: 999;
            //               left: 90px;
            //               // width: v-bind('state.gridWidth');
            //               width: 200px;
            //               height: 230px;
            //               padding: 10px;
            //               border-radius: 5px;
            //               color: #000;
            //               box-shadow: 1px 1px 3px rgba(176, 179, 182) ;
            //               // background-color: #F2FBF6;
            //               background-color: #fff;
            //               .one{
            // display: flex;
            // justify-content: space-between;
            //               }
            //               .two{
            //                 border-radius: 5px;
            // background-color: #F4F4F5;
            // font-size: 12px;
            // padding: 10px ;
            // margin: 10px 0;

            // .left{
            //   width: 60px;
            //   display: inline-block;
            //   text-align: right;
            //   color: rgba(62, 70, 79, 0.8);
            //   margin: 5px 0;
            // }
            // .right{
            //   width: 100px;
            //   display: inline-block;
            //   text-align: left;
            //   margin: 5px 0;
            // }
            //               }
            //               .three{
            //                 .ftct{
            //                   text-align:center;
            //                 }
            //                 .ft12{
            //                   font-size: 12px;
            //                 }
            //                 display: flex;
            //                 align-items: center;
            //                 justify-content: space-between;
            //               }
            //               .yinliang {
            //   // position: absolute;
            //   // right: 25px;
            //   // top: 0;
            //   width: 100px;
            //   // height: 60px;
            // display: flex;
            //   align-items: center;
            // float: right;
            // margin-right: 2px;
            //   .sliders {
            //     margin-left: 15px;
            //   }

            //   :deep(.el-slider__button) {
            //     width: 10px;
            //     height: 10px;
            //     vertical-align: baseline;
            //   }

            //   :deep(.el-slider__runway) {
            //     height: 3px;
            //   }

            //   :deep(.el-slider__bar) {
            //     height: 3px;
            //   }
            // }
            //             }
            .t1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              height: 100%;
              .t1-left,
              .t1-right {
                .ft700 {
                  // color: v-bind('state.ftcolor');
                  color: #000;
                  font-weight: 700;
                }

                .gray {
                  font-size: 12px;
                  color: rgba(176, 179, 182);
                }
              }
            }

            .b1 {
              border-top: 1px solid #f2f2f2;
              margin: 0 8px;
              display: flex;
              justify-content: space-evenly;
              .svgIcon {
                font-size: 20px;
              }

              .b1-left {
                // color: v-bind('state.ftcolor');
                color: #000;
              }

              .b1-right {
                // color: v-bind('state.ftcolor');
                color: #000;
              }
            }
          }
        }
      }

      .two {
        width: 100%;
        margin-right: 8px;

        .one-item {
          border-radius: 5px;
          border: 1px solid #d4f2e0;
          .title {
            border-radius: 5px 5px 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            letter-spacing: 10px;
            background-color: #d4f2e0;
          }

          .content {
            width: v-bind("state.gridWidth");
            height: 118px;
            border-radius: 0 5px 5px 0;
            border-left: 3px solid #28bf65;
            // background-color: v-bind('state.bgcolor');
            background-color: #f2fbf6;
            color: v-bind("state.ftcolor");
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 20px 0 0 0;
            margin-bottom: 8px;
            position: relative;
            .t1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              // flex-wrap: wrap;
              width: 100%;
              height: 100%;
              // margin-left: 13px;
              .t1-left-scroll {
                //   display: flex;
                // justify-content: space-around;
                // align-items: center;
                //  width: 100%;
                text-align: center;
                width: 100%;
                height: 60px;
                padding-left: 5px;
              }
              .t1-left {
                // background-color: v-bind('state.bgcolor2');
                background-color: #e6f7ee;
                padding: 5px 10px;
                // width: 90px;
                width: 41%;
                height: 50px;
                border-radius: 5px;
                display: inline-block;
                // margin-left: 15px;
                margin: 0 6px;
                margin-bottom: 5px;

                .ft700 {
                  // color: v-bind('state.ftcolor');
                  color: #000;
                  font-weight: 700;
                }

                .gray {
                  font-size: 12px;
                  color: rgba(176, 179, 182);
                }
              }
            }

            .b1 {
              border-top: 1px solid #f2f2f2;
              // margin: 0 8px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              // margin-top: 10px;

              .svgIcon {
                font-size: 20px;
              }

              .b1-left {
                // color: v-bind('state.ftcolor');
                color: #000;
              }

              .b1-right {
                // color: v-bind('state.ftcolor');
                color: #000;
              }

              .ftsz {
                font-size: 12px;
              }
            }
          }
        }
      }

      .three {
        width: 100%;
        margin-right: 8px;

        .one-item {
          border-radius: 5px;
          border: 1px solid #d9edf5;
          .title {
            border-radius: 5px 5px 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            letter-spacing: 10px;
            background-color: #d9edf5;
          }

          .content {
            width: v-bind("state.gridWidth");
            height: 118px;
            border-radius: 0 5px 5px 0;
            border-left: 3px solid #42a4cf;
            // background-color: v-bind('state.bgcolor');
            background-color: #f4fafc;
            color: v-bind("state.ftcolor");
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 20px 0 0 0;
            margin-bottom: 8px;
            position: relative;
            .t1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              flex-wrap: wrap;
              width: 100%;
              height: 100%;
              .t1-left-scroll {
                text-align: center;
                width: 100%;
                height: 60px;
                padding-left: 5px;
              }
              .t1-left {
                // background-color: v-bind('state.bgcolor2');
                background-color: #eaf5f9;
                padding: 5px 10px;
                // width: 102px;
                width: 41%;
                height: 50px;
                border-radius: 5px;
                display: inline-block;
                // margin-left: 15px;
                margin: 0 6px;
                margin-bottom: 5px;
                .ft700 {
                  // color: v-bind('state.ftcolor');
                  color: #000;
                  font-weight: 700;
                }

                .gray {
                  font-size: 12px;
                  color: rgba(176, 179, 182);
                }
              }
            }

            .b1 {
              border-top: 1px solid #f2f2f2;
              margin: 0 8px;
              // padding-top: 15px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              // line-height: 36px;
              height: 100%;
              .svgIcon {
                font-size: 20px;
              }

              .b1-left {
                // color: v-bind('state.ftcolor');
                width: 100px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #000;
              }

              .b1-right {
                // color: v-bind('state.ftcolor');
                color: #000;
              }

              .ftsz {
                font-size: 12px;
              }
            }
          }
        }
      }

      .four {
        width: 100%;
        margin-right: 8px;

        .one-item {
          border-radius: 5px;
          border: 1px solid #eae0ff;
          .title {
            border-radius: 5px 5px 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            letter-spacing: 10px;
            background-color: #eae0ff;
          }

          .content {
            width: v-bind("state.gridWidth");
            height: 118px;
            border-radius: 0 5px 5px 0;
            border-left: 3px solid #9b70ff;
            // background-color: v-bind('state.bgcolor');
            background-color: #f9f6ff;
            color: v-bind("state.ftcolor");
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 20px 0 0 0;
            margin-bottom: 8px;
            position: relative;
            .t1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              height: 100%;
              .t1-left-scroll {
                // text-align: center;
                width: 100%;
                height: 60px;
                text-align: center;
                // display: flex;
                // justify-content: space-between;
                // padding-left:8%;
                // padding:0 20px;
              }
              .t1-left {
                // background-color: v-bind('state.bgcolor2');
                background-color: #f3eeff;
                padding: 5px 10px;
                // width: 102px;
                width: 41%;
                height: 50px;
                border-radius: 5px;
                margin: 0 6px;
                margin-bottom: 5px;
                display: inline-block;
                // margin-left: 15px;

                .ft700 {
                  // color: v-bind('state.ftcolor');
                  color: #000;
                  font-weight: 700;
                }

                .gray {
                  font-size: 12px;
                  color: rgba(176, 179, 182);
                }
              }
            }

            .b1 {
              border-top: 1px solid #f2f2f2;
              margin: 0 8px;
              display: flex;
              justify-content: center;
              .svgIcon {
                font-size: 20px;
              }

              .b1-left {
                // color: v-bind('state.ftcolor');
                color: #000;
              }

              .b1-right {
                // color: v-bind('state.ftcolor');
                color: #000;
              }
            }
          }
        }
      }

      .five {
        width: 100%;
        height: 100%;
        .one-item {
        height: 100%;

          border-radius: 5px;
          border: 1px solid #f0f0f0;
          .title {
            border-radius: 5px 5px 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            letter-spacing: 10px;
            background-color: #f0f0f0;
          }

          .content {
            width: v-bind("state.gridWidth");
            height: 118px;
            border-radius: 0 5px 5px 0;
            border-left: 3px solid #b5b5b5;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 20px 0 0 0;
            margin-bottom: 8px;
            position: relative;
             background-color: #F9F9F9;
            .t1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              height: 100%;
              .t1-left,
              .t1-right {
                // width: 50%;
                text-align: center;
                .ft700 {
                  font-weight: 700;
                }

                .gray {
                  font-size: 12px;
                  color: rgba(176, 179, 182);
                }
              }
            }

            .b1 {
              border-top: 1px solid #f2f2f2;
              margin: 0 8px;
              display: flex;
              justify-content: space-evenly;
              .svgIcon {
                font-size: 20px;
              }

              .b1-left {
                color:#27005A
              }

              .b1-right {
                color:#27005A
              }
            }
          }
        }
      }
      .hover-popover {
        position: absolute;
        top: 130px;
        z-index: 999;
        left: 56px;
        // width: v-bind('state.gridWidth');
        width: 200px;
        height: 230px;
        padding: 10px;
        border-radius: 5px;
        color: #000;
        box-shadow: 1px 1px 3px rgba(176, 179, 182);
        // background-color: #F2FBF6;
        background-color: #fff;
        .one {
          display: flex;
          justify-content: space-between;
        }
        .two {
          border-radius: 5px;
          background-color: #f4f4f5;
          font-size: 12px;
          padding: 10px;
          margin: 10px 0;

          .left {
            width: 60px;
            display: inline-block;
            text-align: right;
            color: rgba(62, 70, 79, 0.8);
            margin: 5px 0;
          }
          .right {
            width: 100px;
            display: inline-block;
            text-align: left;
            margin: 5px 0;
          }
        }
        .three {
          .ftct {
            text-align: center;
          }
          .ft12 {
            font-size: 12px;
          }
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        }
        .yinliang {
          // position: absolute;
          // right: 25px;
          // top: 0;
          width: 120px;
          // height: 60px;
          display: flex;
          align-items: center;
          float: right;
          margin-right: 2px;
          .sliders {
            margin-left: 15px;
          }

          :deep(.el-slider__button) {
            width: 10px;
            height: 10px;
            vertical-align: baseline;
          }

          :deep(.el-slider__runway) {
            height: 3px;
          }

          :deep(.el-slider__bar) {
            height: 3px;
          }
        }
      }
    }
  }
}

.jiqiren {
  //机器人
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 5px #c9c8c8;
  padding: 10px;
  margin-right: 24px;
}
</style>
<!-- 首页 空闲，通话中，广播中，监听中，断线内小按钮所有弹层 -->
<style>
.el-dialog__body {
  padding: 0px 20px 15px 20px;
}
</style>
<!-- hover小弹层 -->
<style scoped lang="scss">
.hover-popover-xiugai {
  // position: absolute;
  // top: 130px;
  // z-index: 999;
  // left: 56px;
  // width: v-bind('state.gridWidth');
  // width: 200px;
  // height: 230px;
  // padding: 10px;
  border-radius: 5px;
  color: #000;
  // box-shadow: 1px 1px 3px rgba(176, 179, 182);
  // background-color: #F2FBF6;
  // background-color: #fff;
  .one {
    display: flex;
    justify-content: space-between;
    span:nth-child(2) {
      cursor: pointer;
    }
  }
  .two {
    border-radius: 5px;
    background-color: #f4f4f5;
    font-size: 12px;
    padding: 10px;
    margin: 10px 0;

    .left {
      width: 60px;
      display: inline-block;
      text-align: right;
      color: rgba(62, 70, 79, 0.8);
      margin: 5px 0;
    }
    .right {
      width: 100px;
      display: inline-block;
      text-align: left;
      margin: 5px 0;
    }
  }
  .three {
    .ftct {
      text-align: center;
    }
    .ft12 {
      font-size: 12px;
    }
    .ft24 {
      font-size: 24px;
    }
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  .yinliang {
    // position: absolute;
    // right: 25px;
    // top: 0;
    width: 120px;
    // height: 60px;
    display: flex;
    align-items: center;
    float: right;
    margin-right: 2px;
    .sliders {
      margin-left: 15px;
    }

    :deep(.el-slider__button) {
      width: 10px;
      height: 10px;
      vertical-align: baseline;
    }

    :deep(.el-slider__runway) {
      height: 3px;
    }

    :deep(.el-slider__bar) {
      height: 3px;
    }
  }
}
</style>
<style scoped lang="scss">
// 呼叫
.hujiaoVideo {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  background-color: #cbcbcb;
  .right {
    width: 100%;
    .xiangqingVideo {
      width: 100%;
      height: 150px;
      border-radius: 8px;
      background-color: #cbcbcb;
      .wushipin {
        width: 100%;
        height: 150px;
        border-radius: 8px;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }
  }
}
.hujiaoCenter {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: rgba(62, 70, 79, 0.6);
  .c1 {
    width: 50px;
    border-bottom: 1px solid #f0eeee;
  }
  .c3 {
    width: 50px;
    border-bottom: 1px solid #f0eeee;
  }
}
.hujiaoBottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img:nth-child(1) {
    width: 50px;
    height: 50px;
    // margin-left: 40px;
  }
  img:nth-child(2) {
    width: 30px;
    height: 30px;
    margin-left: 20px;
  }
  .plus {
    position: absolute;
    right: 15px;
    top: -220px;
    width: 150px;
    height: 220px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #b1afaf;
    border-radius: 5px;
    padding: 8px;
    .top {
      display: flex;
      justify-content: space-between;
      margin: 0;
    }
  }
}
//监控
.jiankongVideo {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  background-color: #cbcbcb;
  margin-bottom: 20px;

  .right {
    width: 100%;
    .xiangqingVideo {
      width: 100%;
      height: 300px;
      border-radius: 8px;
      background-color: #cbcbcb;
      .wushipin {
        width: 100%;
        height: 300px;
        border-radius: 8px;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }
  }
}
//记录
.top {
  display: flex;
  margin: 10px 0;

  .widthColor {
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f2f3f5;
  }

  .activeColor {
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #409eff;
    color: #fff;
  }
}
//监听
.jiantingVideo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .video-item {
    width: 49%;
    height: 150px;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #cbcbcb;
  }
  .right {
    width: 100%;
    .xiangqingVideo {
      width: 100%;
      height: 300px;
      border-radius: 8px;
      background-color: #cbcbcb;
      .wushipin {
        width: 100%;
        height: 300px;
        border-radius: 8px;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }
  }
}
.jiantingBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  .t1 {
    display: flex;
    width: 80px;
    margin-left: 18px;
    img {
      width: 25px;
      height: 25px;
      margin-right: 5px;
    }
  }
  .t2 {
    display: flex;
    align-items: center;
    width: 80px;
    img {
      width: 28px;
      height: 28px;
      margin-right: 5px;
    }
  }
}
//强插
.qiangchaVideo {
  .video-item {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #cbcbcb;
    .right {
      width: 100%;
      .xiangqingVideo {
        width: 100%;
        height: 300px;
        border-radius: 8px;
        background-color: #cbcbcb;
        .wushipin {
          width: 100%;
          height: 300px;
          border-radius: 8px;
          background-color: #f5f5f5;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        }
      }
    }
  }
}
.btm {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 40px;
    height: 40px;
  }
}
//详情
.xiangqing {
  display: flex;
  align-items: center;
  .left {
    // width: 65%;
    width: 100%;
  }
  .right {
    // width: 30%;
    .xiangqingVideo {
      width: 100%;
      height: 150px;
      border-radius: 8px;
      background-color: #cbcbcb;
      .wushipin {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }
  }
}
</style>

<style scoped lang="scss">
v-deep .el-checkbox__input.is-checked .el-checkbox__label {
  color: #409eff !important; /* 选中时文字颜色 */
}
:deep(.el-button .el-button--default) {
  opacity: 0 !important;
}
</style>
